在多个下拉列表中获得点击选项答案

【问题标题】：Get clicked option in multiple dropdown在多个下拉列表中获得点击选项
【发布时间】：2012-05-03 12:28:15
【问题描述】：

我有一个多选下拉菜单，例如：

<select id="myList" multiple="multiple">  
    <option value="1">Opt #1</option>
    <option value="2" selected="selected">Opt #2</option>
    <option value="3" selected="selected">Opt #3</option>
    <option value="4">Opt #4</option>
</select>

如果我然后选择Opt #4，那么我如何只获得Opt #4 而不是Opt #2 和Opt #3？我知道我可以通过这个获得所有选定的选项：

var selectedOptions = $("#myList option:selected");

但是我只想要我点击的选项 - Opt #4。这可能吗？

编辑：请注意，当我在 change 事件中操作列表时，我无法在 click 事件中执行此操作。还添加了缺失的多个。

【问题讨论】：

你想达到什么目的？如果你想获得“点击”选项，为什么是多选？
您是否错过了将multiple 属性添加到选择标签？
您错过了select 的mulitple="multiple" 属性。除此之外，它应该可以工作。

标签： javascript jquery jquery-selectors

【解决方案1】：

您可以在每个选项元素的点击处理程序中获取它：

$("#myList option").click(function() {
    var clickedOption = $(this);
});

更新

编辑：当我在更改事件中操作列表时，我无法在单击事件中执行此操作。

在这种情况下，您需要使用on 委托事件。试试这个：

$("#myList").on("click", "option", function() {
    var clickedOption = $(this);
});

但是，需要注意的一点是，option 元素在 IE 中根本不会引发 click 事件，因此上述任何一个都不会在该浏览器中起作用。

【讨论】：

这将为每个选项添加一个事件处理程序。如果您在调用此选项后添加了选项，则新选项将无法按预期工作。请查看我的解决方案，了解如何避免此问题。
我忘了提到我在更改事件中操作列表，所以我不能在点击事件中进行。
请注意，对于多选，您可以取消选中选项，因此您可能需要使用 $(this).is(':selected') 来检查选项是否被选中。
我知道这已经过时了，但是应该警告正在寻找通用解决方案的人，据我所知，这在任何版本的 Internet Explorer 中都不起作用，包括 11. 鼠标事件不是从 IE 中的 HTML 选项元素引发的。
@RichN long time 就是这种情况。不过，我会在这个答案中添加一个关于它的注释，谢谢。

【解决方案2】：

如您所知，如果用户在未按下 Cntrl 键的情况下单击了选项 #4，那么您只会将选项 #4 作为选定选项。

如果用户在按下 Cntrl 键的情况下单击选项 #4，则将选择所有三个选项。所以所有三个选项都将返回。如果您只想要 Opt#4，那么您需要添加一个点击事件处理程序。

【讨论】：

【解决方案3】：

以下内容对您有帮助吗？

$('#myList').delegate('option', 'click', function (opt) {
  alert('Option ' + opt.value + ' was clicked');
});

【讨论】：

【解决方案4】：

真正的答案：

select.onclick = function(e) {
  console.log(e.target.value);
};

【讨论】：