Is there an onSelect event or equivalent for HTML ?

I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,

Now, doSomething() only gets triggered when the selection changes.
I want to trigger doSomething() when the user selects any option, possibly the same one again.
I have tried using an “onClick” handler, but that gets triggered before the user starts the selection process.
So, is there a way to trigger a function on every select by the user?
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!


Solution 1:

Here is the simplest way:

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

Works both with mouse selection and keyboard Up/Down keys whes select is focused.

Solution 2:

I needed something exactly the same. This is what worked for me:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">

Supports this:

when the user selects any option, possibly the same one again

Solution 3:

I had the same problem when I was creating a design a few months back. The solution I found was to use .live("change", function()) in combination with .blur() on the element you are using.

If you wish to have it do something when the user simply clicks, instead of changing, just replace change with click.

I assigned my dropdown an ID, selected, and used 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.

I saw this one didn’t have a selected answer, so I figured I’d give my input. This worked excellently for me, so hopefully someone else can use this code when they get stuck.

Edit: Use the on selector as opposed to .live. See jQuery .on()

Solution 4:

Just an idea, but is it possible to put an onclick on each of the <option> elements?

  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>

Another option could be to use onblur on the select. This will fire anytime the user clicks away from the select. At this point you could determine what option was selected. To have this even trigger at the correct time, the onclick of the option’s could blur the field (make something else active or just .blur() in jQuery).

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.
It is however possible to trigger the onclick event in 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>

Solution 6:

Going to expand on jitbit’s answer. I found it weird when you clicked the drop down and then clicked off the drop down without selecting anything. Ended up with something along the lines of:

var lastSelectedOption = null;

DDChange = function(Dd) {
  //Blur after change so that clicking again without 
  //losing focus re-triggers onfocus.

  //The rest is whatever you want in the change.
  var tcs = $("span.on_change_times");
  tcs.html(+tcs.html() + 1);
  return false;

DDFocus = function(Dd) {
  lastSelectedOption = Dd.prop("selectedIndex");
  Dd.prop("selectedIndex", -1);

  return false;

//On blur, set it back to the value before they clicked 
//away without selecting an option.
//This is what is typically weird for the user since they 
//might click on the dropdown to look at other options,
//realize they didn't what to change anything, and 
//click off the dropdown.
DDBlur = function(Dd) {
  if (Dd.prop("selectedIndex") === -1)
    Dd.prop("selectedIndex", lastSelectedOption);

  return false;
<script src=""></script>

<select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));">
<br/>Selected index: <span class="selected_index"></span>
<br/>Times onchange triggered: <span class="on_change_times">0</span>

This makes a little more sense for the user and allows JavaScript to run every time they select any option including an earlier option.

The downside to this approach is that it breaks the ability to tab onto a drop down and use the arrow keys to select the value. This was acceptable for me since all the users click everything all the time until the end of eternity.

Related:  Meteor: Calling an asynchronous function inside a Meteor.method and returning the result