jQuery chrome中选择选项元素上的点击事件

Click event on select option element in chrome

提问by Samantha Branham

I'm having a problem in Chromewith the following:

我在以下方面遇到问题Chrome：

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

items.each(function(){

    $(this).click(function(){

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

The clickevent doesn't seem to fire in Chrome, but works in Firefox.

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

I wanna be able to clickon a optionelement from a combo, if I do instead another kind of element, lets say <li>it works fine. Any ideas? Thanks.

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

回答by Samantha Branham

I don't believe the click event is valid on options. It is valid, however, on select elements. Give this a try:

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

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

回答by vivek sharma

We can achieve this other way despite of directly calling event with <select>.

尽管直接使用<select>.

JS part:

JS部分：

$("#sort").change(function(){

    alert('Selected value: ' + $(this).val());
});

HTML part:

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>

回答by DarckBlezzer

The easy way to change the select, and update it is this.

更改选择并更新它的简单方法是这样。

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

another example:

另一个例子：

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

another example:

另一个例子：

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

回答by Halon

I've had simmilar issue. changeevent was not good for me because i've needed to refresh some data when user clicks on option. After few trials i've got this solution:

我有类似的问题。change事件对我不利，因为我需要在用户单击时刷新一些数据option。经过几次试验，我得到了这个解决方案：

$('select').on('click',function(ev){
    if(ev.offsetY < 0){
      //user click on option  
    }else{
      //dropdown is shown
    }
});

I agree that this is very ugly and you should stick with changeevent where you can, but this solved my problem.

我同意这非常难看，您应该尽可能坚持使用change事件，但这解决了我的问题。

回答by Elina Lulle

I found that the following worked for me - instead on using on click, use on change e.g.:

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

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

       //your code here

}));

回答by Artur Saidov

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

回答by Adrián Suarez Bais

Looking for this on 2018. Click event on option tag, inside a select tag, is not fired on Chrome.

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

Use change event, and capture the selected option:

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

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

Be aware that $target may be a collection of objects if the select tag is multiple.

请注意，如果 select 标签是多个，则 $target 可能是一个对象集合。

回答by Aaron Sherman

I use a two part solution

我使用两部分解决方案

• Part 1 - Register my click events on the options like I usually would
• Part 2 - Detect that the selected item changed, and call the click handler of the new selected item.

• 第 1 部分 - 像往常一样在选项上注册我的点击事件
• 第 2 部分 - 检测所选项目发生变化，并调用新所选项目的点击处理程序。

HTML

HTML

<select id="sneaky-select">
  <option id="select-item-1">Hello</option>
  <option id="select-item-2">World</option>
</select>

JS

JS

$("#select-item-1").click(function () { alert('hello') });
$("#select-item-2").click(function () { alert('world') });

$("#sneaky-select").change(function ()
{
   $("#sneaky-select option:selected").click();
});

回答by Ilan Schemoul

Since $(this)isn't correct anymore with ES6 arrow function which don't have have the same thisthan function() {}, you shouldn't use $( this ) if you use ES6 syntax.
Besides according to the official jQuery's anwser, there's a simpler way to do that what the top answer says.
The best way to get the html of a selected option is to use

由于$(this)ES6 箭头函数不再正确，因为它不具有相同的this比function() {}，因此如果您使用 ES6 语法，则不应使用 $( this ) 。
除了根据官方的 jQuery 的anwser 之外，还有一种更简单的方法可以做到顶级答案所说的。
获取所选选项的 html 的最佳方法是使用

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

You can replace html()by text()or anything else you want (but html()was in the original question).
Just add the event listener change, with the jQuery's shorthand method change(), to trigger your code when the selected option change.

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

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

If you just want to know the value of the option:selected(the option that the user has chosen) you can just use $('#yourSelect').val()

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

回答by JeanP

Workaround:

解决方法：

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

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