HTML SELECT - 即使选项未更改也会触发 JavaScript ONCHANGE 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11877527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML SELECT - Trigger JavaScript ONCHANGE event even when the option is not changed
提问by Dilip Raj Baral
I have the following markup:
我有以下标记：
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchangeevent. So, the jsFunction()is not called. But I want the jsFunction()called even in this case. How can I achieve this?
当用户下拉组合框并选择先前选择的相同选项（或根本不更改选择）时，JavaScript 不会将其视为onchange事件。所以，jsFunction()不叫。但jsFunction()即使在这种情况下我也想要被调用。我怎样才能做到这一点？
回答by Simme
I'd do it like this:
我会这样做：
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1. Even better: put a label in there for the choices in the box.
如果您愿意，您可以使用与第一个选项相同的标签，在本例中为 1。更好：将标签放在框中以供选择。
回答by gaurang171
You have to add empty option to solve it,
你必须添加空选项来解决它，
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
我还可以为您提供另一种解决方案，但这取决于您是否适合您，因为用户在选择 jsFunction 以外的其他选项后选择默认选项将被调用两次。
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}
回答by user6132740
Just set the selectIndexof the associated <select>tag to -1as the last step of your processing event.
只需将selectIndex关联<select>标签的 设置-1为处理事件的最后一步。
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .
它每次都有效，删除突出显示并允许您再次选择相同（或不同）的元素。
回答by Praveen Singh
Try this. Just add an empty option. This will solve your problem.
尝试这个。只需添加一个空选项。这将解决您的问题。
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>?
回答by eamyx
use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
对每个选项元素使用“onmouseup”属性。它很冗长，但应该可以工作。此外，根据您的函数实际在做什么，您可以稍微不同地安排事情，假设该数字在处理程序中很重要：
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>
回答by figolu
JavaScript code:
JavaScript 代码：
- on mousedown event: set selectedIndex property value to -1
- on change event: handle event
- 在 mousedown 事件上：将 selectedIndex 属性值设置为 -1
- 更改事件：处理事件
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected
唯一的缺点是当用户点击下拉列表时，当前选中的项目不会出现选中状态
回答by La Page PT
For this problem, I have finally put a new <i>tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
对于这个问题，我终于放了一个新<i>标签来刷新选择。如果所选选项与已选择的选项相同，则不要尝试触发事件。
If user click on the "refresh" button, I trigger the onchange event of my select with :
如果用户单击“刷新”按钮，我会使用以下命令触发我的选择的 onchange 事件：
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.
这样，我不需要尝试在我的选择中选择相同的选项。
回答by Strelok
It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the changeevent.
它没有触发，因为值没有“改变”。这是相同的值。不幸的是，您无法使用该change事件实现所需的行为。
You can handle the blurevent and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.
blur当用户离开选择框时，您可以处理该事件并执行您需要的任何处理。这样，即使用户选择了相同的值，您也可以运行所需的代码。
