如何将事件处理程序绑定到<option>

Question

这是我的代码：

$(".multiple").each(function() {
        $(this).bind("mousedown",function() {
            alert();
        });
    });

这是适用于的HTML：

<select>
<option value = "textbox">TextBox</option>
<option class = "multiple" value = "multiplechoice">MultipleChoice</option>
<option class = "multiple" value = "dropdown">DropDown</option>
</select>

我希望看到某种警报框，但它似乎没有起作用。 我怎样才能解决这个问题？

Answer 1

我不确定是否可以将事件绑定到option元素，因为它们是由浏览器绘制的，并且一旦呈现就属于影子DOM （我认为）。 至少在Chrome 17中，它对我不起作用 。

但是，您可以这样做...

$('select').change(function() {
    alert('Selected is ' + $(this).find('option:selected').text());
});

jsFiddle 。

Answer 2

像这样的东西？

$('.multiple').change(function(){
    alert('something');
    });

HTML：

<select class="multiple">
<option value = "textbox">TextBox</option>
<option  value = "multiplechoice">MultipleChoice</option>
<option  value = "dropdown">DropDown</option>
</select>

Answer 3

不要去那里-经验丰富。 那不是跨浏览器的解决方案。 我的建议是，在select的“ change”事件上，测试当前所选选项是否具有“ multiple”类，如果是，则运行特定的逻辑。

Answer 4

您可以在select上捕获事件，并按选项类对其进行过滤

$('select').change(function() {
    var o = $(this).find('option:selected');
    if ('multiple' != o.attr('class')) {
        return;
    }
    alert('Clicked: ' + o.text());
});

您也可以使用click()而不是change()来获得不会导致更改的点击，但是您会获得使选择项下降的点击，也就是说，如果选择项为size="1" 。 这种方法将要求您的事件处理程序解决误报的问题，因此不鼓励这样做。