Javascript 如果新值与旧值相同，如何在HTMLSelectElement上触发更改事件？

我有以下标记：

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

1.
2.
3.

---

当用户下拉组合框并选择之前选择的相同选项（或根本不更改选择）时，JavaScript不会将其视为

onchange

事件。因此，不调用

jsFunction（）

。但即使在这种情况下，我也希望调用

jsFunction（）

。我怎样才能做到这一点呢？

试试这个。只需添加一个空选项。这会解决你的问题

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

1.
2.
3.
​

我会这样做：

<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.
2.
3.

如果需要，可以使用与第一个选项相同的标签，在本例中为1。

---

更好的方法是：在框中的选项中添加一个标签。

它不会触发，因为值没有“更改”。这是相同的值。不幸的是，您无法使用

change

事件实现所需的行为

---

您可以处理

blur

事件，并在用户离开选择框时执行所需的任何处理。这样，即使用户选择了相同的值，您也可以运行所需的代码。

您必须添加空选项来解决它

我还可以再给您一个解决方案，但这取决于您是否适合您，因为用户在选择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);
}

1.
2.
3.
函数jsFunction（）{
var myselect=document.getElementById（“selectOpt”）；
警报（myselect.options[myselect.selectedIndex].value）；
}

对每个选项元素使用“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>

1//获取处理程序中的选定元素
2//将值作为参数显式发送
3//同上，但使用元素的value属性并允许动态选项值。您还可以将“this.innerHTML”或“this.textContent”发送到处理程序，使选项值变得不必要

JavaScript代码：

• mousedown事件：将selectedIndex属性值设置为-1
• 更改事件：处理事件

---

唯一的缺点是，当用户单击下拉列表时，当前选定的项目不会显示为已选定

，只需将关联的

标记的

selectIndex

设置为

-1

，作为处理事件的最后一步

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

---

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

对于这个问题，我最终放置了一个新的

标记来刷新选择。如果所选选项与已选选项相同，则不要尝试触发事件

如果用户单击“刷新”按钮，我将触发select的onchange事件：

const refreshEquipeEl = document.getElementById("refreshEquipe1");

function onClickRefreshEquipe(event){
    let event2 = new Event('change');
    equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;

---

这样，我就不需要在我的选择中尝试选择相同的选项。

通常，当我想要这种行为时，我会添加一个没有值的额外条目，这是默认值。。。在事件处理程序中，检查它是否被选中，如果被选中，则什么也不做。@Geoffrey我也这么认为。这又带来了另一个问题。如何动态地（使用JavaScript）选择所需的选项（本例中没有值的条目）？这将在顶部创建一个空框，也可以选择。不是一个很好看的解决方案。这对第一个选项有效。当选择其他选项时，用户再次选择相同的选项？？实际上情况是这样的。我有一个组合框。当选择任何选项时，我隐藏combox，并使用CHANGE选项将combobox的值显示为标签。单击“更改”时，我再次显示该组合框。@RajBD，是的，如果不处理

blur

并使其离开“选择”以进行更新，您将无法执行该操作。不过这是一个小的可用性问题。我认为如果你给他们一个明确的“取消”选项会更好，在你显示选择框时，在选择框旁边放置一个“取消”链接。这不起作用。直到事件失去焦点，模糊事件才会触发。如果您只需单击已选择的选项，它不会启动。我以前尝试过单击。。不适用于所有浏览器。。特别是Chrome。每当我显示组合框时，我都会将selecedIndex设置为0。工作完美！！如果我希望在默认情况下选择其中一个选项，则此解决方案不适用于我。我发现此解决方案不受欢迎，因为它会给页面添加大量膨胀。例如，在一个页面上，一个表有50行，每行中都有一个下拉控件，选择中有10个选项，对于31个字符的通用解决方案，这需要插入15500个字符。这已经进入了向页面添加大量内容的阶段。我也测试了这一点，但在使用键盘导航或选择元素的情况下，此解决方案完全无法工作。正如预期的那样，根本没有开火。