Question

$('select').bind('click contextmenu',function(ev){

})

ev.target始终为select，而不是option。

我怎么知道现在点击哪一个？

不要告诉我这样做：

$('option').bind('click contextmenu',function(ev){

})

因为它在IE8中不受支持，你可以自己测试一下！

修改

它还应支持右键点击，这会触发contextmenu事件

Answer 1

您可以对选择框使用更改事件，并可以使用以下内容查找当前选定的项目。

$("#sel").change ( function() {
    alert ( $(this).find("option:selected").val() );
});

Answer 2

<option>无法捕获IE中的事件。它没有独立的生命;选择框是IE中单个不可分割的OS小部件，因此单击选项将始终为<select>元素生成单击事件。

虽然您理论上可能会猜测从event.clientY属性中单击了哪个选项，但这需要您确切知道IE如何呈现菜单，包括正在使用的字体（在您的控件中），以及弹出菜单是向下还是向上弹出或者是否触及屏幕边缘，因此与选择元素不对齐（根本不在您的控制范围内）。对于一个非常简短的菜单，你可能希望它总是向下打开并从那里计算，但它并不真正可靠。几乎总是最好让点击通过，然后看看之后选择了哪个选项。

关于oncontextmenu，请忘掉它。右键单击IE中的<option>不会执行任何操作，也不会生成任何事件。如果您需要可右键单击的菜单，则必须使用基于JavaScript div的弹出式模拟替换<select>。

Answer 3

我想一个解决方案可能是检查value的新select：它应该来自您刚刚点击的option用户。

或者您也可以查看selectedIndex的{{1}}属性：它还应该指向刚刚选择的select。

Answer 4

只需对select元素使用val（） - 方法：

$('select').bind('click contextmenu',function(ev){
    var value = $(this).val();
})

OR：

$('select').change(function(ev){
    var value = $(this).val();
})

Answer 5

这是以jquery文档为例

 $("select").change(function () { 
          var str = ""; 
          $("select option:selected").each(function () { 
                str += $(this).text() + " "; 
              }); 
          $("div").text(str); 
        }) 
        .trigger('change');

来自Selectors/selected

Answer 6

您可以使用所选属性。像这样：

$("#YourSelect option:selected");

如何检查实际点击了哪个<option>？</option>

6 个答案: