我有一个输入表单，它允许我从多个选项中进行选择，并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在，doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething()，可能是相同的选项。
我已经尝试使用“onClick”处理程序，但在用户开始选择过程之前被触发。
那么，是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效，但并不总是有效。有时，当用户单击下拉菜单时，甚至在用户完成选择过程之前，事件就会被触发!
当前回答
为了在用户每次选择某个东西(甚至是相同的选项)时正确地触发一个事件，您只需要欺骗选择框。
如其他人所说，在focus上指定一个负selectedIndex来强制更改事件。虽然这确实允许你欺骗选择框，但只要它仍然有焦点，它就不会起作用。简单的解决方法是强制选择框模糊，如下所示。
JS / HTML标准:
<select onchange="myCallback();" onfocus="this.selectedIndex=-1;this.blur();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
jQuery插件:
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<script type="text/javascript">
$.fn.alwaysChange = function(callback) {
return this.each(function(){
var elem = this;
var $this = $(this);
$this.change(function(){
if(callback) callback($this.val());
}).focus(function(){
elem.selectedIndex = -1;
elem.blur();
});
});
}
$('select').alwaysChange(function(val){
// Optional change event callback,
// shorthand for $('select').alwaysChange().change(function(){});
});
</script>
你可以在这里看到一个工作演示。
其他回答
我要扩展一下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键并使用方向键选择值的功能。这对我来说是可以接受的，因为所有用户都会一直点击所有内容，直到永恒结束。
请注意，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事件就会一直被触发，当你点击时，我们会失去所选的项目，如果你的列表很长，这可能会很烦人，但它可能在某种程度上帮助你。
您应该尝试使用option:selected
$("select option:selected").click(doSomething);
试试这个:
<select id="nameSelect" onfocus="javascript:document.getElementById('nameSelect').selectedIndex=-1;" onchange="doSomething(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
我知道这个问题现在已经很老了，但是对于仍然遇到这个问题的人来说，我已经通过向我的选项标记添加onInput事件来实现了这一点，然后在被调用的函数中，检索该选项输入的值。
<选择id='dropdown' on输入='myFunction()'> <选项value = " 1 " > < /选项> <选项value = " 2 " > < /选项> 选择< - > < p >输出:< / p > <跨越id =“输出”> < /跨越> <类型=“短信/ javascript脚本”> 我的功能() var optionValue =文档。getElementById(“dropdown”)。 文件输出getElementById(“”)。内html =选择值; 的 剧本< - >
