我在Chrome 遇到以下问题：
var items = $("option", obj);
items.each(function(){
$(this).click(function(){
// alert("test");
process($(this).html());
return false;
});
});
click 事件似乎不会在 Chrome 中触发，但在 Firefox 中有效。
我希望能够在组合中的option 元素上使用click，如果我改为使用另一种元素，可以说<li> 它工作正常。有任何想法吗？谢谢。
【问题讨论】：
标签： jquery google-chrome select
我使用两部分解决方案
HTML
<select id="sneaky-select">
<option id="select-item-1">Hello</option>
<option id="select-item-2">World</option>
</select>
JS
$("#select-item-1").click(function () { alert('hello') });
$("#select-item-2").click(function () { alert('world') });
$("#sneaky-select").change(function ()
{
$("#sneaky-select option:selected").click();
});
【讨论】：
在 2018 年寻找这个。 选择标签内的选项标签上的点击事件不会在 Chrome 上触发。
使用更改事件，并捕获选定的选项：
$(document).delegate("select", "change", function() {
//capture the option
var $target = $("option:selected",$(this));
});
请注意，如果选择标签是多个，$target 可能是对象的集合。
【讨论】：
更改选择和更新选择的简单方法是这样。
// BY id
$('#select_element_selector').val('value').change();
另一个例子：
//By tag
$('[name=selectxD]').val('value').change();
另一个例子：
$("#select_element_selector").val('value').trigger('chosen:updated');
【讨论】：
.val('value') 中，'value' 的值是 option value 属性。示例：<option value="3">$('#select_element_selector').val('3').change();
解决方法：
$('#select_id').on('change', (function() {
$(this).children(':selected').trigger('click');
}));
【讨论】：
由于$(this) 与this 与function() {} 不同的 ES6 箭头函数不再正确，因此如果您使用 ES6 语法，则不应使用 $( this )。
除了根据官方 jQuery 的 anwser 之外，还有一种更简单的方法可以做到这一点，就像上面的答案所说的那样。
获取所选选项的 html 的最佳方法是使用
$('#yourSelect option:selected').html();
您可以将html() 替换为text() 或您想要的任何其他内容（但html() 在原始问题中）。
只需添加事件侦听器change，使用jQuery 的简写方法change()，即可在所选选项更改时触发您的代码。
$ ('#yourSelect' ).change(() => {
process($('#yourSelect option:selected').html());
});
如果您只想知道option:selected（用户选择的选项）的值，您可以使用$('#yourSelect').val()
【讨论】：
我遇到了类似的问题。 change 事件对我不利，因为当用户点击 option 时我需要刷新一些数据。经过几次试验，我得到了这个解决方案：
$('select').on('click',function(ev){
if(ev.offsetY < 0){
//user click on option
}else{
//dropdown is shown
}
});
我同意这很丑陋，您应该尽可能坚持change 事件，但这解决了我的问题。
【讨论】：
我知道这段代码 sn-p 用于识别选项点击（至少在 Chrome 和 FF 中）。此外，如果元素在 DOM 加载时不存在，它也可以工作。当我将输入部分输入到单个选择元素中并且我不希望单击部分标题时，我通常会使用它。
$(document).on('click', 'option[value="disableme"]', function(){
$('option[value="disableme"]').prop("selected", false);
});
【讨论】：
我发现以下内容对我有用 - 而不是在点击时使用，在更改时使用例如：
jQuery('#element select').on('change', (function() {
//your code here
}));
【讨论】：
<select id="myselect">
<option value="0">sometext</option>
<option value="2">Ready for Review</option>
<option value="3">Registration Date</option>
</select>
$('#myselect').change(function() {
if($('#myselect option:selected').val() == 0) {
...
}
else {
...
}
});
【讨论】：
也许新的 jquery 版本之一支持选项上的点击事件。它对我有用：
$(document).on("click","select option",function() {
console.log("nice to meet you, console ;-)");
});
更新：一个可能的用例可能如下：用户发送一个 html 表单并将值插入到数据库中。但是，默认情况下会设置一个或多个值，并且您标记此自动条目。您还向用户显示他的条目是自动生成的，但是如果他通过单击已选择的选项来确认该条目，则您会更改数据库中的标志。一个罕见的诉讼案件，但有可能......
【讨论】：
$(document) 会污染document 点击事件，尤其是在Chrome 开发工具上调试时（例如）。我更喜欢（例如在这种情况下）使用$('select option')（换句话说，将事件直接分配给元素）。
尽管直接使用<select> 调用事件，我们也可以通过其他方式实现。
JS部分：
$("#sort").change(function(){
alert('Selected value: ' + $(this).val());
});
HTML 部分：
<select id="sort">
<option value="1">View All</option>
<option value="2">Ready for Review</option>
<option value="3">Registration Date</option>
<option value="4">Last Modified</option>
<option value="5">Ranking</option>
<option value="6">Reviewed</option>
</select>
【讨论】：
通常对我有用的是首先更改下拉列表的值，例如
$('#selectorForOption').attr('selected','selected')
然后触发变化
$('#selectorForOption').changed()
这样，任何连接到的 javascript
【讨论】：
我不认为点击事件对选项有效。但是，它在选择元素上是有效的。试试这个：
$("select#yourSelect").change(function(){
process($(this).children(":selected").html());
});
【讨论】：