我有一个输入表单，它允许我从多个选项中进行选择，并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething()，可能是相同的选项。
我已经尝试使用“onClick”处理程序，但在用户开始选择过程之前被触发。
那么，是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效，但并不总是有效。有时，当用户单击下拉菜单时，甚至在用户完成选择过程之前，事件就会被触发!
当前回答
我要扩展一下jitbit的答案。当你点击下拉菜单，然后不选择任何东西就关闭下拉菜单时，我觉得很奇怪。最后得出了如下结论:
var lastSelectedOption = null; DDChange = function(Dd) { //Blur after change so that clicking again without //losing focus re-triggers onfocus. Dd.blur(); //The rest is whatever you want in the change. var tcs = $("span.on_change_times"); tcs.html(+tcs.html() + 1); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; DDFocus = function(Dd) { lastSelectedOption = Dd.prop("selectedIndex"); Dd.prop("selectedIndex", -1); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; //On blur, set it back to the value before they clicked //away without selecting an option. // //This is what is typically weird for the user since they //might click on the dropdown to look at other options, //realize they didn't what to change anything, and //click off the dropdown. DDBlur = function(Dd) { if (Dd.prop("selectedIndex") === -1) Dd.prop("selectedIndex", lastSelectedOption); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));"> <option>1</option> <option>2</option> </select> <br/> <br/>Selected index: <span class="selected_index"></span> <br/>Times onchange triggered: <span class="on_change_times">0</span>
这对用户来说更有意义，并且允许JavaScript在每次选择任何选项(包括先前的选项)时运行。
这种方法的缺点是，它破坏了在下拉菜单上使用tab键并使用方向键选择值的功能。这对我来说是可以接受的，因为所有用户都会一直点击所有内容，直到永恒结束。
其他回答
只是一个想法，但有可能把每个<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())。
这可能不能直接回答你的问题，但这个问题可以通过简单的设计调整来解决。我知道这可能不是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).
有时候，你只需要退一步，从大局出发，寻找最简单的解决方案。
非常老的问题，但现在点击事件工作得很好，也就是说，即使用户重新选择相同的选项，它也会触发。
测试自己:
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代码中你可以使用这个返回一个开关或任何你想要的东西。
你可以使用onChange: http://www.w3schools.com/TAGS/tag_Select.asp
摘自http://www.faqs.org/docs/htmltut/forms/_SELECT_onChange.html onChange指定当用户选择其中一个选项时要运行的JavaScript。这意味着当用户选择一个项目时，操作将立即启动，而不是当按下“提交”按钮时。
