Question

我想知道当用户点击＆＃34;选择＆＃34;时，如何在下拉列表中捕获事件。下拉列表。我希望例如在列表的不同元素聚焦时拦截事件。

我尝试将事件侦听器绑定到列表的选项元素，但它们不捕获任何内容。请在此处查看示例代码：

    <select>
        <option onfocus="alert('Hi there');">Foo</option>
        <option>Bar</option>
    </select>

由于

Answer 1

你不能，<select>是一个被替换的元素，它的子元素只作为它的数据，而不是实际的子元素。

您可以做的最好的事情是将onChange事件应用于<select>本身，然后访问this.options[this.selectedIndex]来执行操作。

Answer 2

您将捕获onchange事件，然后测试以查看值的变化，如下所示：

更新：注意我添加的onfocus事件。

有关更多提示，请点击此处：Is there an onSelect event or equivalent for HTML <select>?

<script type="text/javascript">

function myDDLOnChangeEvent()
{
    var selectedValue = document.getElementById('myDDL').value;
    if(selectedValue == 'Foo')
    {
        //alert('Hi there');
        //do stuff here - except for alerts
        //if you put an alert here, it will fire the onfocus event again..
        //  ..after you click 'ok' in the alert box
    }
}

</script>

<select id="myDDL" onchange="myDDLOnChangeEvent();" onfocus="this.selectedIndex = -1;">
    <option>Foo</option>
    <option>Bar</option>
</select>

捕获<select> list </select>中的事件

2 个答案: