How to check which <option> is actually clicked?

Question

$('select').bind('click contextmenu',function(ev){

})

ev.target is always a select,not option.

How can I know which one is now being clicked?

Don't tell me to do this:

$('option').bind('click contextmenu',function(ev){

})

Because it's not supported in IE8,and you can test it yourself!

EDIT

It should also support right click,which fires the contextmenu event

Answer 1

I suppose a solution might be to check the new value of the select : it should be the one coming from the option your user just clicked on.

Or you might also check the selectedIndex property of your select : it should also point to the option that's just been choosen.

Answer 2

Just use the val()-method on the select element:

$('select').bind('click contextmenu',function(ev){
    var value = $(this).val();
})

OR:

$('select').change(function(ev){
    var value = $(this).val();
})

Answer 3

This is from the jquery documentation as an example

 $("select").change(function () { 
          var str = ""; 
          $("select option:selected").each(function () { 
                str += $(this).text() + " "; 
              }); 
          $("div").text(str); 
        }) 
        .trigger('change');

From Selectors/selected

Answer 4

You can use the change event for the select box and can find the currently selected item using the following.

$("#sel").change ( function() {
    alert ( $(this).find("option:selected").val() );
});

Answer 5

You could use the selected attribute. Something like this:

$("#YourSelect option:selected");

Answer 6

html

<select id="selector">
  <option id="1"> first </option>
  <option id="2"> second </option>
</select>

jQuery

$("#selector").change(function(){

  // get the option object
  var opt = $("option:selected",this);

  // get the DOM element
  var optDOM = opt.get(0);

  // test if it's the selected option
  alert(opt.attr("id"));
});

check it here

Answer 7

<option> cannot catch events in IE. It has no independent life of its own; select boxes are single indivisible OS widgets in IE so a click on an option will always instead generate a click event for the <select> element.

Whilst you might theoretically guess which option was being clicked from the event.clientY property, that would require you to know exactly how IE had rendered the menu, including what fonts were in use (somewhat within your control), and whether the pop-up menu had popped up downwards or upwards or hit the edge of the screen so misaligned against the select element (not within your control at all). For a very short menu you could hope that it'll always open downwards and calculate from there, but it's not really reliable. It's almost always best to let the click go through and just see which option is selected afterwards.

As for oncontextmenu, forget it. Right-clicking an <option> in IE does nothing, no event is generated for you to catch at all. If you want right-clickable menus you will have to replace your <select> with a JavaScript div-based pop-up analogue.