CODEWITHSUNDEEP
javascripteventsonchange
baudot
baudot

Reputation: 1618

Workaround: <Select>ing the first <option> never fires an onchange event

I have a select-option block on a webpage, and I want it to fire for ANY of the options that get selected in it. However, the first option never fires onselect: Not even if a later option was selected previously.

For example, if my code reads:

Settings:
Sensitivity: <select id="sensitivity" onchange="if (this.selectedIndex) ajaxUpdateConfig();">
  <option value="25">25%</option>
  <option value="50">50%</option>
  <option value="100" selected>100</option>
</select>

...then selecting the first option, 25%, never fires the onchange() event.

Similarly, if the first option is the default value, and the user changes away from it and then wants to return back to it, that doesn't fire the onchange event, either.

Note: I'm aware that the standard answer to the "First selection doesn't generate onchange events" problem is to make a dummy (disabled) first option. But that doesn't fit the design of this page: The menu represents shows the current status while offering the options that the user could change the settings to. Having a dummy entry is bad interface design, for this page.

Upvotes: 1

Views: 1211

Answers (1)

SLaks
SLaks

Reputation: 887767

this.selectedIndex is 0 for the first option.
0 is falsy, so your if never fires.

Get rid of the if entirely; there's no reason for it.

Upvotes: 6

Related Questions