HTML SELECT - 即使未更改选项,也会触发JavaScript ONCHANGE事件

Question

我有以下标记:

<select onchange="jsFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

当用户下拉组合框并选择之前选择的相同选项(或根本不更改选择)时,JavaScript不会将其视为onchange事件.所以,jsFunction()没有被召唤.但jsFunction()即使在这种情况下我也想要被叫.我怎样才能做到这一点？

Answer 1

我这样做:

<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>

如果你想要你可以拥有与第一个选项相同的标签,在这种情况下是1.更好:在框中放置一个标签以供选择.

Answer 2

你必须添加空选项来解决它,

我也可以给你一个更多的解决方案,但由你决定是否适合你因为用户选择其他选项之后选择默认选项将比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);
}

Answer 3

只需将selectIndex关联<select>标签的 设为-1处理事件的最后一步即可。

mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1; 

它每次都会起作用，删除突出显示并允许您再次选择相同（或不同）的元素。