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

I'm having a problem in Chrome with the following:

我在Chrome中遇到以下问题：

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

items.each(function(){

    $(this).click(function(){

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

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

点击事件似乎不会在Chrome中触发，但可以在Firefox中使用。

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

我想能够点击组合中的选项元素，如果我做了另一种元素，让我们说

它工作正常。有任何想法吗？谢谢。

它工作正常。有任何想法吗？谢谢。

13 个解决方案

#1

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

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

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

#2

We can achieve this other way despite of directly calling event with <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>

#3

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

}));

#4

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

#5

I've had simmilar issue. change event 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:

我有同样的问题。更改事件对我不利，因为当用户点击选项时我需要刷新一些数据。经过几次试验，我得到了这个解决方案：

$('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 change event where you can, but this solved my problem.

我同意这是非常难看的，你应该尽可能坚持改变事件，但这解决了我的问题。

#6

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');

#7

Maybe one of the new jquery versions supports the click event on options. It worked for me:

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

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

UPDATE: A possible usecase could be the following: A user sends a html form and the values are inserted into a database. However one or more values are set by default and you flag this automated entries. You also show the user that his entry is generated automatically, but if he confirm the entry by clicking on the already selected option you change the flag in the database. A rare sue case, but possible...

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

#8

What usually works for me is to first change the value of the dropdown, e.g.

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

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

$（ '＃selectorForOption'）。ATTR（ '选择'， '选择'）

and then trigger the a change

然后触发更改

$('#selectorForOption').changed()

$（ '＃selectorForOption'）。（）改变

This way, any javascript that is wired to

这样，任何连线的JavaScript

#9

I know that this code snippet works for recognizing an option click (at least in Chrome and FF). Furthermore, it works if the element wasn't there on DOM load. I usually use this when I input sections of inputs into a single select element and I don't want the section title to be clicked.

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

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

#10

Since $(this) isn't correct anymore with ES6 arrow function which don't have have the same this than 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箭头函数与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.

你可以用text（）或你想要的任何其他东西替换html（）（但html（）在原始问题中）。只需使用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()

如果您只想知道选项的值：selected（用户选择的选项），您可以使用$（'＃yourSelect'）。val（）

#11

Workaround:

解决方法：

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

$（'＃select_id'）。on（'change'，（function（）{$（this）.children（'：selected'）。trigger（'click'）;}））;;

#12

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可能是对象的集合。

#13

I use a two part solution

我使用两部分解决方案

• Part 1 - Register my click events on the options like I usually would
• 第1部分 - 像往常一样在选项上注册我的点击事件
• Part 2 - Detect that the selected item changed, and call the click handler of the new selected item.
• 第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();
});