我有一个输入表单，它允许我从多个选项中进行选择，并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething()，可能是相同的选项。
我已经尝试使用“onClick”处理程序，但在用户开始选择过程之前被触发。
那么，是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效，但并不总是有效。有时，当用户单击下拉菜单时，甚至在用户完成选择过程之前，事件就会被触发!
当前回答
使用jquery:
<select class="target">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script>
$('.target').change(function() { doSomething(); });
</script>
其他回答
几个月前我做设计的时候也遇到了同样的问题。我发现的解决方案是在你正在使用的元素上使用.live("change"， function())结合.blur()。
如果你想让它在用户点击时做一些事情，而不是改变，只需用点击替换改变。
我为我的下拉菜单分配了一个ID，选择并使用如下:
$(function () {
$("#selected").live("change", function () {
// do whatever you need to do
// you want the element to lose focus immediately
// this is key to get this working.
$('#selected').blur();
});
});
我看到这个问题没有选择答案，所以我想我应该给出我的建议。这对我来说非常有效，所以希望其他人在遇到困难时可以使用这段代码。
http://api.jquery.com/live/
编辑:使用on选择器而不是.live。参见jQuery .on()
这是我的解，和这里的解完全不同。它使用鼠标位置来确定是否单击了某个选项，而不是单击选择框打开下拉菜单。它利用事件。屏幕y位置，因为这是唯一可靠的跨浏览器变量。必须首先附加悬停事件，以便在单击事件之前计算出控件相对于屏幕的位置。
var select = $("select");
var screenDif = 0;
select.bind("hover", function (e) {
screenDif = e.screenY - e.clientY;
});
select.bind("click", function (e) {
var element = $(e.target);
var eventHorizon = screenDif + element.offset().top + element.height() - $(window).scrollTop();
if (e.screenY > eventHorizon)
alert("option clicked");
});
这是我的jsFiddle http://jsfiddle.net/sU7EV/4/
请注意，IE上的OPTION标签不支持事件处理程序，我想出了这个解决方案，尝试一下，给我你的反馈:
<script>
var flag = true;
function resetIndex(selObj) {
if(flag) selObj.selectedIndex = -1;
flag = true;
}
function doSomething(selObj) {
alert(selObj.value)
flag = false;
}
</script>
<select onchange="doSomething(this)" onclick="resetIndex(this)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
我在这里所做的实际上是重置选择索引，这样onchange事件就会一直被触发，当你点击时，我们会失去所选的项目，如果你的列表很长，这可能会很烦人，但它可能在某种程度上帮助你。
非常老的问题，但现在点击事件工作得很好，也就是说，即使用户重新选择相同的选项，它也会触发。
测试自己:
const e = document.getElementById('myOptions') e.addEventListener('click'， () => { const text = e.options[e.selectedIndex].text; console.log(文本) }) <选择id = " myOptions " > <选项> < /选项> <选项> < / B >选项 <选项> C > < /选项 < /选择>
我发现的最佳解决方案是在select元素的第一个元素中添加一个禁用选项，以便所有其他项目都可以响应onchange事件中的单击。
<select onchange="doSomething()">
<option disabled selected value> -- select an option -- </option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
