简体   繁体   English

如何检测用户何时点击下拉菜单中的选项(选择标记)

[英]how to detect when a user clicks on an option in a drop down menu (select tag)

I have a select and I want to run a different javascript function depending on what they select when they click it in the menu. 我有一个选择,我想运行一个不同的JavaScript函数,具体取决于他们在菜单中单击它时选择的内容。 My googling has been unfruitful, can anyone direct me to the correct property? 我的谷歌搜索一直没有用,有人能指引我到正确的房产吗? (for example, I know that onclick works well with buttons). (例如,我知道onclick适用于按钮)。 Thanks in advance for any help! 在此先感谢您的帮助!

EDIT: onchange doesn't work in my code. 编辑: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>

I'd suggest using the change / onchange event, though this only fires if the user selects an option that wasn't previously selected (hence the name). 我建议使用change / onchange事件,但这只会在用户选择之前未选择的option (因此名称)时触发。

A simple demonstration of how you can use change (tested in Chrome 27/Windows XP): 简单演示如何使用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 . JS小提琴演示

It's important to note that the change / onchange event must be bound to the select element, not the option elements . 重要的是要注意, change / onchange事件必须绑定到select元素, 而不是 option元素 The option s themselves don't change, selecting them triggers the change. option本身不会更改,选择它们会触发更改。

References: 参考文献:

I suggest you use jQuery on and off, like this: 我建议你使用jQuery打开和关闭,像这样:

$('body').on('change', '#yourSelectId', function(){
      // do what you need
});
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>

change function() from jQuery will help you to do that: jQuery change function()将帮助您做到这一点:

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

alert("item had change!!");

})
})

Live example 实例

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM