0 votes
by (230 points)

Hi. I've done some digging, and I can't seem to find anything on this specific... kind of strange problem I'm having.

When creating a dropdown menu (using "select" in HTML), the menu will always default to the last option in the list. This happens whether or not I use the "selected" keyword for any of the options.

elect name="ecolor" tabindex="7">
	<option value="blue" selected>Blue</option>
	<option value="green">Green</option>
	<option value="brown">Brown</option>
	<option value="hazel">Hazel</option>
	<option value="black">Black</option>
	<option value="gray">Gray</option>

In this example, the list will always have "Gray" selected when it is rendered. Is there any way to prevent this?

1 Answer

0 votes
by (44.1k points)
edited by

It's a little ugly, but this works.  Add an ID to the <select> (like "<select id="color" name="ecolor">"), and then, near the bottom of the passage, put this:

<<run $(document).one(':passagerender', function (ev) {
	$(ev.content).find("#color").prop('selectedIndex', 0);

That will trigger the code to set which item is selected when the passage is rendered using SugarCube's ":passagerender" event.

Setting the selectedIndex to 0 will cause the first element in the list to be selected.  (See the jQuery .prop() API for details.)  The "#name" has to match the id="name" (for classes use ".name" to match with class="name", just like in CSS.)

Hope that helps!  :-)

by (230 points)
Might be ugly, but it works! Thanks a lot! :D
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.