我有一个输入表单,它允许我从多个选项中进行选择,并在用户更改选择时执行一些操作。例如,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

现在,doSomething()只在选择改变时被触发。

我想在用户选择任何选项时触发doSomething(),可能是相同的选项。

我已经尝试使用“onClick”处理程序,但在用户开始选择过程之前被触发。

那么,是否有一种方法在用户每次选择时触发一个函数?

更新:

Darryl提出的答案似乎有效,但并不总是有效。有时,当用户单击下拉菜单时,甚至在用户完成选择过程之前,事件就会被触发!


当前回答

非常老的问题,但现在点击事件工作得很好,也就是说,即使用户重新选择相同的选项,它也会触发。

测试自己:

const e = document.getElementById('myOptions') e.addEventListener('click', () => { const text = e.options[e.selectedIndex].text; console.log(文本) }) <选择id = " myOptions " > <选项> < /选项> <选项> < / B >选项 <选项> C > < /选项 < /选择>

其他回答

<script>
function abc(selectedguy) {
alert(selectedguy);
}
</script>

<select onchange="abc(this.selectedIndex);">
<option>option one</option>
<option>option two</option>
</select>

这里你有一个返回的索引,在js代码中你可以使用这个返回一个开关或任何你想要的东西。

另一个解决方案是使用onMouseUp事件。 OnMouseUp也与相同的选项重新选择以及改变选项。

只有劣势。当打开下拉框时调用该代码,当做出选择时调用第二次。对于AJAX请求,请记住这一点。 如果这不会损害你的逻辑,你可以使用它作为一个简单的内联黑客。

<select id="bla" onmouseup="console.log( document.getElementById('bla').options[document.getElementById('bla').selectedIndex].value );">
  <option value="0">A</option>
  <option value="1">B</option>
</select>

只是一个想法,但有可能把每个<option>元素的onclick ?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

另一种选择是在选择上使用onblur。这将在用户单击离开选择时触发。此时,您可以确定选择了什么选项。为了在正确的时间触发,选项的onclick可以模糊字段(在jQuery中使其他东西活跃或只是.blur())。

这是最简单的方法:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

工作与鼠标选择和键盘上/下键时,选择是集中。

试试这个(当你选择选项时触发事件,不改变选项):

$("select").mouseup(function() {
    var open = $(this).data("isopen");
    if(open) {
        alert('selected');
    }
    $(this).data("isopen", !open);
});

http://jsbin.com/dowoloka/4