选项的单击事件在 IE 中不起作用答案

【问题标题】：click event for option doesn't work in IE选项的单击事件在 IE 中不起作用
【发布时间】：2013-12-13 20:17:14
【问题描述】：

我有一个多选标签，我需要编写它的选项的onclick函数，因为我需要获取最后点击选项的值，但是当我写了以下内容时

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

它在 IE 中不起作用。

有什么问题？

更新

我确实需要点击事件，因为我已经写了一个函数onclick事件（demo here），我需要修复最后更改的元素的值，没有点击事件是不可能做到的（我认为）

【问题讨论】：

这个怎么样？ jsfiddle.net/6TZrH/1
非常感谢：/ 非常有趣的解决方案（我不知道.not 方法）

标签： jquery onclick

【解决方案1】：

不要在选项上绑定它

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

接受的答案：

$(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');
        })
});

【讨论】：

我需要绑定选项，因为我需要获取点击选项的值，请查看更新
这只会在你每次点击select元素时触发，你需要使用change event handler
这可以正常工作。您只需要检查被点击的元素是否是一个选项（e.target.tagName == "OPTION"）。 Google 事件委托了解更多信息。
@edeverett：要么我完全关闭，要么这是错误的。你介意发布一个例子来说明你的意思吗？
@jAndy 我错了。当然，如果选项元素不支持点击事件，仅仅移动事件绑定也无济于事！但是，在对此进行调查时，我找到了答案。

【解决方案2】：

如果您真的想在每个选项上使用click event，则需要使用List 而不是dropdown 样式。

为此，请将size 属性添加到select 元素中，例如：

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

现在您可以单独绑定每个option。

如果您想获取单击选项的值，请使用change 事件处理程序和.val() 方法，例如：

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

【讨论】：

正如我所想，OP想要获得最后点击的元素选项
采用“大小”方法的不错的一个 :) +1

【解决方案3】：

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

应该做的事

【讨论】：

我的错，我没明白你可以有几个选择。

【解决方案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>

根据您所做的选择，警报窗口会显示所选值。

【讨论】：

【解决方案5】：

在选项上使用 JQuery focus()，而不是 click()。

快乐编码。

【讨论】：

【解决方案6】：

好的，这里有一些 IE 怪异：

使用IE，在点击事件函数中，event.srcElement.value给出最后点击选项的值。

试试这个：http://jsfiddle.net/Ch2DT/（仅在 IE8 中测试，需要工作才能使其跨浏览器）

【讨论】：

【解决方案7】：

我喜欢@Reigel 的（已接受）答案，但需要对其进行改进以便在我的一个项目中使用。在下面的代码中，我引入了一个新函数“findClickedOption”，它解释了用户可能会重新单击已选择的选项这一事实。这仍然不能说明按住 CTRL 键单击多个选项，但对我来说已经足够了。

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

【讨论】：