(Sugarcube 2.27/Twine 2) Why do dropdown menus always default to the last option?

Question

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>
</select>

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

Answer 1

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!  :-)

Comments

Might be ugly, but it works! Thanks a lot! :D