Javascript Event for Select element Selection

Question

I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.

At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.

Any suggestions?

Answer 1

I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:

$('select option:selected').removeAttr('selected');

Answer 2

Change on select boxes is unreliable anyway. Read:

http://www.quirksmode.org/dom/events/change.html#t05

I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.

Answer 3

This is possible, however it is not fully supported. Here is a sample:

html

<select id="selectId">
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
 <option value="4">D</option>
</select>

jquery

$("#selectId>option").click(function(){
 alert(this.value);
});

here is a mediocre approach to handle ie:

<div id="dropdownWrapper">
 <select id="selectId">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
 </select>
</div>

js

var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
    if(++clickCount_guid324fF % 2 == 0){
        alert($("#selectId").val());
        clickCount_guid324fF = 0;
    }
});