9

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

<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事件中执行此操作。还添加了缺少的多个。

4

4 回答 4

9

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

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

更新

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

在这种情况下，您需要使用on. 试试这个：

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

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

于 2012-05-03T12:32:34.763 回答
1

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

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

于 2012-05-03T12:32:30.413 回答
1

以下内容对您有帮助吗？

$('#myList').delegate('option', 'click', function (opt) {
  alert('Option ' + opt.value + ' was clicked');
});
于 2012-05-03T12:33:23.237 回答
0

真正的答案：

select.onclick = function(e) {
  console.log(e.target.value);
};
于 2021-02-21T00:53:58.980 回答