click event for option doesn't work in IE

问题

I have a multiple select tag, and I need to write the function onclick of it's options, because I need to get the value of last clicked option, but when I wrote the following

$("#multiple_select option").click(function()
{
     var val = $(this).val();
     alert(val);
});

it doesn't work in IE.

What is the problem?

UPDATE

I need exactly click event, because I wrote a function onclick event already(demo here), and I need to fix last changed element's value, which is impossible to make without click event(I think)

回答1:

don't bind it on option

$("#multiple_select").click(function(){
     alert("works");
});

accepted answer:

$(document).ready(function()
{
    var options = $("#supply_cities_select :selected");
    var lastOption;
    $("#supply_cities_select").click(function()
        {
            lastOption = $(this).find(':selected').not(options);
            options = $(this).find(':selected');
        })
});

回答2:

If you really want to have a click event on each option, you need to have List instead of a dropdown style.

To accomplish that, add the size attribute into the select element for instance:

<select type="multiple" size=4>
  <option>foo</option>
  <option>bar</option>
  <option>baseball</option>
</select>

Now you can bind each option individually.

If you want to get the value of a clicked option use the change event handler and .val() method, like:

$("#multiple_select").change(function() {
  var val = $(this).val();
  alert(val);
});

回答3:

$("#multiple_select").click(function(){
  alert($(this).children("option:selected").val());
});

should to the thing

回答4:

<select id="multiple_select" size="4">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $('#multiple_select').click(function() {
            alert($(this).val());
        });
    });

</script>

The alert window, depending on the choice you made, shows the selected value.

回答5:

Use JQuery focus() on option, rather than click().

Happy Coding.

回答6:

Ok, here's some IE weirdness:

Using IE, in the click event function, event.srcElement.value gives the value of the last clicked option.

Try this: http://jsfiddle.net/Ch2DT/ (only tested in IE8, needs work to make it cross browser)

回答7:

I liked @Reigel's (accepted) answer but needed to improve it for use in one of my projects. In the code below, I introduce a new function "findClickedOption" that accounts for the fact that maybe a user will re-click an already-selected option. This still doesn't account for CTRL-clicking multiple options but is good enough for me.

    var multiselect_s=$('#ms2side__sx');
    var options_s =multiselect_s.find('option:selected');
    multiselect_s.live('click',function(){
      var clickedOption =findClickedOption($(this), options_s);
      options_s = $(this).find('option:selected');
      doSomething(clickedOption);//call your own function here
    });

    function findClickedOption(selectbox, optionsArr){
      var selectedOptions=selectbox.find('option:selected');
      if(selectedOptions.size>1){
        return selectedOptions.not(optionsArr);        
      }else{
        return selectedOptions;
      }
    }

来源：https://stackoverflow.com/questions/3341740/click-event-for-option-doesnt-work-in-ie

标签

jquery

onclick