Run change event for select even when same option is reselected

Question

Basically, I have drop down menu that looks like this:

<select>
  <option>0</option>
  <option selected="selected">1</option>
  <option>2</option>
  <option>3</option>
</select>

I am trying to write a function that is fired even when you select the same option, i.e. even if the drop-down is opened and re-select the selected option, I want it to execute the function.

Answer 1

If you mean selecting with the mouse, you can use mouseup. However, it will fire when the select box is being opened as well, so you'll need to keep track of the amount of times it was fired (even: select is being opened, odd: select is being closed): http://jsfiddle.net/T4yUm/2/.

$("select").mouseup(function() {
    var open = $(this).data("isopen");

    if(open) {
        alert(1);
    }

    $(this).data("isopen", !open);
});

Answer 2

pimvdb's answer was a big help for me but I added a couple of extra bits to deal with keyboard activation and navigation away from the select:

$('select').mouseup(... as in pimvdb... )
  .blur(function() {
     $(this).data('isopen', false);
  }).keyup(function(ev) {
     if (ev.keyCode == 13)
        alert(1);
  });

The blur handler deals with navigating away from the select while the dropdown is open, the keyup handler deals with when you change the select's value with the keyboard. The behaviour is then that the user is only considered to have finally selected the value when they click return to navigate away. If you want a different behaviour with the keyboard that shouldn't be hard to do.

Answer 3

select isn't meant to be used this way — there are hacks you can use to get this kind of behavior in most cases, like tracking mouse and keyboard events on the select, but there’s no guarantee they’ll keep working, or work on every platform.

I would suggest either…

1. Resetting the select to its default value on change, and using some other text to indicate which one is “selected”, or
2. using a control other than select.

Can you describe the end goal a little more detail?

Answer 4

An alternative, use the .blur() event -- http://jsfiddle.net/VKZb2/4/

Pro

This will fire either way.

Con

It only fires once the control loses focus.

Answer 5

I ran into the same issue. I just added a click event to the option tags and change the value of the select:

$("#select option").mouseup(function() {
    $(this).parent().val($(this).attr("value"));
    // do something.
});

NOTE: This doesn't work on iPhone or iPad devices.

Answer 6

Try the below solution. It accounts for loss of focus via mouse click or Esc key.

// whether or not dropdown is opened
var open = false;

$("#selectElement").on("click", function() {
    open = !open;
    if (!open)
    {
        console.log("option has been selected/re-selected");
    }
});

// update dropdown state upon loss of focus
$("#selectElement").on("blur", function() {
     if(open){
        open = !open;
     }
});

// update dropdown state upon Esc key of focus
$(document).keyup(function(e) {
   if (e.keyCode == 27) {
     if(open){
        open = !open;
     }
   }
});