我有一个输入表单,它允许我从多个选项中进行选择,并在用户更改选择时执行一些操作。例如,
<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>
你可以在这里看到一个工作演示。