如何检测用户何时单击下拉菜单中的选项（选择标签）答案

【问题标题】：how to detect when a user clicks on an option in a drop down menu (select tag)如何检测用户何时单击下拉菜单中的选项（选择标签）
【发布时间】：2013-06-13 20:34:12
【问题描述】：

我有一个选择，我想根据他们在菜单中单击它时选择的内容来运行不同的 javascript 函数。我的谷歌搜索没有结果，谁能指导我到正确的属性？（例如，我知道 onclick 适用于按钮）。提前感谢您的帮助！

编辑：onchange 在我的代码中不起作用。

<head>
    <script>
        function goToDelete(){
            document.write("Death to this webpage!")
        }
    </script>
</head>
<form id="checkboxes" method="post" action="someurl">
    <tr>
        <td><input type="checkbox" name="Selection"/></td>
        <td>Some more rows to the table here</td>
    </tr>
    <select name="action">
        <option value="Delete" onchange="goToDelete()">Delete</option>
    </select>

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/Reference/Events/change
如果您打算使用库 (jQuery) 回答问题，请不要忘记 performance issue

标签： javascript html select

【解决方案1】：

我建议使用change/onchange 事件，尽管只有当用户选择了以前未选择的option 时才会触发（因此得名）。

如何使用change 的简单演示（在 Chrome 27/Windows XP 中测试）：

var select = document.getElementById('demo');

function logValue() {
    switch (this.value) {
        case '1':
            console.log('option 1 selected');
            break;
        case '2':
            alert('option 2 selected');
            break;
        case '3':
            confirm('You chose option 3, didn\'t you?');
            break;
    }
}

select.addEventListener('change', logValue, false);

JS Fiddle demo.

请务必注意，change/onchange 事件必须绑定到 select 元素 not the option elements。 options 本身不会改变，选择它们触发改变。

参考资料：

change。

【讨论】：

【解决方案2】：

function SelectedValue(sel) {
    var value = sel.options[sel.selectedIndex].value;  
    //Do something depending on value
}
<select id="myid" onchange="SelectedValue(this)">
    <option value="">Select options</option>
    <option value="Value1">Text1</option>
    <option value="Value2">Text2</option>
    <option value="Value3">Text3</option>
</select>

【讨论】：

【解决方案3】：

我建议你打开和关闭 jQuery，像这样：

$('body').on('change', '#yourSelectId', function(){
      // do what you need
});

【讨论】：

如果您要建议使用库来处理原生事件（不一定是个坏主意），请花时间解释原因。 jQuery 在这种情况下有什么好处？

【解决方案4】：

来自jQuery 的change function() 将帮助您做到这一点：

$(document).ready(function(){
$("#yourselectInput").change(function(){

alert("item had change!!");

})
})

活生生的例子

http://jsbin.com/unujiz/1/edit

【讨论】：