Question

我在Chrome遇到以下问题：

var items = $("option", obj);  

items.each(function(){

    $(this).click(function(){

        // alert("test");
        process($(this).html());
        return false;
    });
});

click事件似乎没有在Chrome中触发，但在Firefox中有效。

我希望能够click来自组合中的option元素，如果我改为使用另一种元素，请说<li>它可以正常工作。有任何想法吗？感谢。

Answer 1

我不相信点击事件对选项有效。但是，它对选择元素有效。试一试：

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});

Answer 2

尽管使用<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>

Answer 3

更改选择和更新选择的简便方法就是这样。

// BY id
$('#select_element_selector').val('value').change();

另一个例子：

//By tag
$('[name=selectxD]').val('value').change();

另一个例子：

$("#select_element_selector").val('value').trigger('chosen:updated');

Answer 4

我发现以下内容对我有用 - 而不是在点击时使用，例如使用：

 jQuery('#element select').on('change',  (function() {

       //your code here

}));

Answer 5

<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 {
    ...
    }
});

Answer 6

也许其中一个新的jquery版本支持选项上的click事件。它对我有用：

$(document).on("click","select option",function() {
  console.log("nice to meet you, console ;-)");
});

更新：可能的用例如下：用户发送html表单并将值插入数据库。但是，默认情况下会设置一个或多个值，并标记此自动条目。您还向用户显示其条目是自动生成的，但如果他通过单击已选择的选项确认该条目，则更改数据库中的标志。一个罕见的案件，但可能......

Answer 7

我使用两部分解决方案

第1部分 - 在我喜欢的选项上注册我的点击事件
第2部分 - 检测所选项目是否已更改，并调用单击新选择项目的处理程序。

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

Answer 8

通常对我有用的是首先更改下拉列表的值，例如

$('#selectorForOption').attr('selected','selected')

然后触发更改

$('#selectorForOption').changed()

这样，任何连接到

的javascript

Answer 9

我知道此代码段适用于识别选项点击（至少在Chrome和FF中）。此外，如果元素不在DOM负载上，它也可以工作。当我将输入的部分输入到单个选择元素中并且我不希望单击部分标题时，我通常会使用它。

$(document).on('click', 'option[value="disableme"]', function(){
    $('option[value="disableme"]').prop("selected", false);
});

Answer 10

由于$(this)不再正确，因为ES6箭头功能没有this而不是function() {}，所以如果你使用的话，你不应该使用$（this） ES6语法。
除了官方jQuery的anwser之外，还有一种更简单的方法可以做到这一点。获取所选选项的html的最佳方法是使用

$('#yourSelect option:selected').html();

您可以将html()替换为text()或您想要的任何其他内容（但html()位于原始问题中。）
只需使用jQuery的简写方法change添加事件侦听器change()，即可在所选选项更改时触发代码。

 $ ('#yourSelect' ).change(() => {
    process($('#yourSelect option:selected').html());
  });

如果您只想知道option:selected（用户选择的选项）的价值，您只需使用$('#yourSelect').val()

Answer 11

解决方法：

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

Answer 12

在2018年寻找这个。选项标记上的点击事件，在选择标记内，不会在Chrome上触发。

使用更改事件，并捕获所选选项：

$(document).delegate("select", "change", function() {
    //capture the option
    var $target = $("option:selected",$(this));
});

请注意，如果select标记为多个，$ target可能是对象的集合。

单击chrome中选择选项元素的事件

12 个答案: