Problem
I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
DoSomething() is now only called when the selection changes.
When the user selects any choice, possibly the same one, I want doSomething() to be called.
I have tried using an “onClick” handler, but that gets triggered before the user starts the selection process.
Is there a way to have a function run every time the user selects something?
Update:
The answer suggested by Darryl seemed to work, but it doesn’t work consistently. Sometimes the event gets triggered as soon as user clicks the drop-down menu, even before the user has finished the selection process!
Asked by ePharaoh
Solution #1
The simplest method is as follows:
<select name="ab" onchange="if (this.selectedIndex) doSomething();">
<option value="-1">--</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
When choose is focused, it works with both mouse selection and keyboard Up/Down keys.
Answered by freezethrower
Solution #2
I was in need of something similar. This is what I found to be effective:
<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Supports this:
Answered by Alex from Jitbit
Solution #3
When I was working on a design a few months ago, I ran into the similar issue. The answer I found was to use.live(“change”, function()) on the element you’re using in conjunction with.blur().
Simply replace the word change with the word click if you want it to perform something when the user clicks.
I gave my dropdown an ID and then chose and utilized the following:
$(function () {
$("#selected").live("change", function () {
// do whatever you need to do
// you want the element to lose focus immediately
// this is key to get this working.
$('#selected').blur();
});
});
I noticed this one didn’t have a pre-selected response, so I decided to contribute. This worked perfectly for me, so hopefully it can help someone else who is stuck.
http://api.jquery.com/live/
Edit: Instead of.live, use the on selector. See jQuery.on for further information ()
Answered by Cody
Solution #4
Is it feasible to place a onclick on each of the choice> elements as a suggestion?
<select>
<option onclick="doSomething(this);">A</option>
<option onclick="doSomething(this);">B</option>
<option onclick="doSomething(this);">C</option>
</select>
Using onblur on the select could also be an option. This will be triggered whenever the user moves their mouse away from the selection. At this point, you should be able to tell which choice was chosen. The onclick of the option’s might blur the field (making something else active or just.blur() in jQuery) to make this even trigger at the right time.
Answered by Darryl Hein
Solution #5
The onclick approach is not entirely bad but as said, it will not be triggered when the value isn’t changed by a mouse-click. The onclick event can, however, be triggered via the onchange event.
<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
<option onclick="doSomethingElse(...);" value="A">A</option>
<option onclick="doSomethingElse(..);" value="B">B</option>
<option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>
Answered by user1845327
Post is based on https://stackoverflow.com/questions/647282/is-there-an-onselect-event-or-equivalent-for-html-select