我有一个输入表单,它允许我从多个选项中进行选择,并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在,doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething(),可能是相同的选项。
我已经尝试使用“onClick”处理程序,但在用户开始选择过程之前被触发。
那么,是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效,但并不总是有效。有时,当用户单击下拉菜单时,甚至在用户完成选择过程之前,事件就会被触发!
如果你真的需要它像这样工作,我会这样做(以确保它通过键盘和鼠标工作)
在select中添加一个onfocus事件处理程序来设置“current”值
向选择中添加onclick事件处理程序以处理鼠标更改
向select添加onkeypress事件处理程序以处理键盘更改
不幸的是,onclick将运行多次(例如,在打开选择…在选择/关闭时)和onkeypress可能会在没有变化时触发…
<script>
function setInitial(obj){
obj._initValue = obj.value;
}
function doSomething(obj){
//if you want to verify a change took place...
if(obj._initValue == obj.value){
//do nothing, no actual change occurred...
//or in your case if you want to make a minor update
doMinorUpdate();
} else {
//change happened
getNewData(obj.value);
}
}
</script>
<select onfocus="setInitial(this);" onclick="doSomething();" onkeypress="doSomething();">
...
</select>
我要扩展一下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键并使用方向键选择值的功能。这对我来说是可以接受的,因为所有用户都会一直点击所有内容,直到永恒结束。
2022香草javascript
...因为这是谷歌的热门节目。
最初的海报没有要求一个JQuery解决方案,但所有的答案只演示JQuery或内联选择标签事件。
使用'change'事件监听器。
const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', function (e) { /* your code */ });
... 或者调用一个单独的函数:
function yourFunc(e) { /* your code here */ }
const selectDropdown = document.querySelector('select');
selectDropdown.addEventListener('change', yourFunc);