Chrome中选择选项元素上的Click事件

jquery google-chrome select

215004 观看

13回复

0 作者的声誉

我在以下方面遇到问题Chrome

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

items.each(function(){

    $(this).click(function(){

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

click事件似乎没有触发Chrome,但可以进行Firefox

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

作者: Victor 的来源 发布者: 2009 年 9 月 9 日

回应 (13)


80

6037 作者的声誉

我认为click事件在选项上无效。但是,在选择元素上有效。试试看:

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});
作者: Samantha Branham 发布者: 09.09.2009 09:41

21

221 作者的声誉

尽管可以直接用调用event,但我们可以通过其他方式实现<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>
作者: vivek sharma 发布者: 30.03.2012 05:42

0

854 作者的声誉

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

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

然后触发更改

$('#selectorForOption').changed()

这样,任何连接到的JavaScript

作者: pardahlman 发布者: 05.08.2013 07:20

1

1201 作者的声誉

也许新的jquery版本之一支持options上的click事件。它为我工作:

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

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

作者: zuluk 发布者: 24.10.2014 09:02

3

33 作者的声誉

<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 {
    ...
    }
});
作者: Artur Saidov 发布者: 03.12.2014 09:08

5

100 作者的声誉

我发现以下对我有用-而不是点击使用,例如更改:

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

       //your code here

}));
作者: Elina Lulle 发布者: 22.01.2015 10:22

0

546 作者的声誉

我知道此代码段可用于识别选项单击(至少在Chrome和FF中)。此外,如果该元素不在DOM加载中,它也可以工作。当我将输入部分输入到单个选择元素中并且我不想单击部分标题时,通常会使用此选项。

$(document).on('click', 'option[value="disableme"]', function(){
    $('option[value="disableme"]').prop("selected", false);
});
作者: Gwi7d31 发布者: 26.01.2015 08:49

4

76 作者的声誉

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

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

我同意这是非常丑陋的,您应该坚持进行尽可能的change活动,但这解决了我的问题。

作者: Halon 发布者: 10.09.2015 07:47

0

1053 作者的声誉

由于$(this)不再是不正确的用ES6箭头不都具有相同的功能thisfunction() {},如果你使用ES6语法,你不应该使用$(本)。
除了根据官方jQuery的anwser所说那样,还有一种更简单的方法可以做到最佳答案。
获取选定选项的html的最佳方法是使用

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

您可以替换html()text()或您想要的其他任何东西(但html()在原始问题中)。
只需change使用jQuery的简写方法添加事件监听器,change()即可在选定选项更改时触发代码。

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

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

作者: Ilan Schemoul 发布者: 01.07.2016 05:05

9

2471 作者的声誉

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

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

另一个例子:

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

另一个例子:

$("#select_element_selector").val('value').trigger('chosen:updated');
作者: DarckBlezzer 发布者: 19.08.2016 06:21

0

31 作者的声誉

解决方法:

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

作者: JeanP 发布者: 24.02.2017 12:59

1

51 作者的声誉

在2018年要寻找的内容。select标签内的option标签上的click事件不会在Chrome上触发。

使用更改事件,并捕获所选的选项:

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

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

作者: Adrián Suarez Bais 发布者: 16.02.2018 02:59

1

3210 作者的声誉

我使用两部分解决方案

  • 第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();
});
作者: Aaron Sherman 发布者: 14.04.2018 07:47
32x32