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

How to bind an event handler to <option>

本文关键字：lt 选项 gt 绑定 事件处理 程序      更新时间：2023-09-26

这是我的代码：

$(".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>

我希望看到某种警报框，但它似乎不起作用。我该怎么解决这个问题？

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

然而，你可以这样做。。。

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

jsFiddle。

可能是这样的吗？

$('.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>

不要去那里——凭经验。这不是一个跨浏览器的解决方案。我的建议是，在select的"change"事件上，测试当前选择的选项是否具有"multiple"类，如果是，则运行特定的逻辑。

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

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

您也可以使用click()而不是change()来获得不会导致更改的点击，但您将获得也会下拉选择的点击，也就是说，如果您的选择是size="1"。这种方法需要您的事件处理程序对误报进行解释，因此不鼓励使用这种方法。

相关文章：