我有一个输入表单，它允许我从多个选项中进行选择，并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething()，可能是相同的选项。
我已经尝试使用“onClick”处理程序，但在用户开始选择过程之前被触发。
那么，是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效，但并不总是有效。有时，当用户单击下拉菜单时，甚至在用户完成选择过程之前，事件就会被触发!
当前回答
很久以前的事了，但在回答最初的问题时，这有帮助吗? 只要把onClick放到SELECT行。 然后在OPTION行中放入您想要每个OPTION做的事情。 即:
<SELECT name="your name" onClick>
<option value ="Kilometres" onClick="YourFunction()">Kilometres
-------
-------
</SELECT>
其他回答
关于select标记(在这个场景中)的奇妙之处在于它将从选项标记中获取它的值。
Try:
<select onChange="javascript:doSomething(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="Foo">C</option>
</select>
对我来说还不错。
这里有几件事要做，以确保它记住旧的值，并在再次选择相同的选项时触发onchange事件。
首先你需要一个常规的onChange事件:
$("#selectbox").on("change", function(){
console.log($(this).val());
doSomething();
});
要想在再次选择相同的选项时触发onChange事件，可以在下拉菜单接收焦点时通过将其设置为无效值来取消设置所选选项。但你也想存储之前选择的值，以便在用户没有选择任何新选项的情况下恢复它:
prev_select_option = ""; //some kind of global var
$("#selectbox").on("focus", function(){
prev_select_option = $(this).val(); //store currently selected value
$(this).val("unknown"); //set to an invalid value
});
上面的代码将允许您触发onchange，即使选择了相同的值。但是，如果用户在选择框外单击，则希望恢复以前的值。我们在onBlur上做:
$("#selectbox").on("blur", function(){
if ($(this).val() == null) {
//because we previously set an invalid value
//and user did not select any option
$(this).val(prev_select_option);
}
});
这可能不能直接回答你的问题，但这个问题可以通过简单的设计调整来解决。我知道这可能不是100%适用于所有用例，但我强烈建议您重新考虑您的应用程序的用户流程，以及以下设计建议是否可以实现。
我决定做一些简单的事情，而不是黑客onChange()使用其他事件的替代方案，这并不是真正意义上的目的(模糊，点击等)。
我的解决方法是:
只需预先挂起一个没有任何值的占位符选项标记，如select。
所以，不要只使用下面的结构，这需要一些hack-y替代方案:
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
考虑使用这个:
<select>
<option selected="selected">Select...</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
因此，通过这种方式，您的代码更加简化，并且每当用户决定选择默认值以外的内容时，onChange将按预期工作。如果您不希望他们再次选择第一个选项，甚至可以将disabled属性添加到第一个选项，并强制他们从选项中选择一些内容，从而触发onChange()触发。
At the time of this answer, I'm writing a complex Vue application and I found that this design choice has simplified my code a lot. I spent hours on this problem before I settled down with this solution and I didn't have to re-write a lot of my code. However, if I went with the hacky alternatives, I would have needed to account for the edge cases, to prevent double firing of ajax requests, etc. This also doesn't mess up the default browser behaviour as a nice bonus (tested on mobile browsers as well).
有时候，你只需要退一步，从大局出发，寻找最简单的解决方案。
使用jquery:
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$('.target').change(function() { doSomething(); });
</script>
唯一正确的答案是不使用选择字段(如果您需要在重新选择相同的答案时执行某些操作)。
创建一个下拉菜单与传统的div，按钮，显示/隐藏菜单。链接:https://www.w3schools.com/howto/howto_js_dropdown.asp
如果能够将事件监听器添加到选项中，就可以避免这种情况。如果select元素有onSelect监听器。如果点击选择字段没有烦人地触发mousedown, mouseup，和同时点击mousedown。
