选项更改时如何在选择时执行更改事件？

Question

当我更改选项时，如何在 select 上执行 onchange 事件处理程序？

document.getElementById('selct').value=2;

<select id="selct" onchange="alert('change success')">
  <option value="0">val1</option>
  <option value="1">val2</option>
  <option value="2">val3</option>
  <option value="3">val4</option>
  <option value="4">val5</option>
  <option value="5">val6</option>
</select>

当我这样做时，结果是 val3，但 select 的 onchange 不起作用。 我该如何解决？

Answer 1

使用 Javascript 以编程方式更改 value 不会触发 change 事件。要使其工作，您必须以编程方式触发事件。

var sel = document.getElementById('selct');
sel.value=2;
sel.onchange();

var sel = document.getElementById('selct');
sel.value = 2;
sel.onchange();

<select id="selct" onchange="alert('change success')">
  <option value="0">val1</option>
  <option value="1">val2</option>
  <option value="2">val3</option>
  <option value="3">val4</option>
  <option value="4">val5</option>
  <option value="5">val6</option>
</select>

来自MDN docs, change events 的select 标记在以下情况下触发：

当用户明确提交更改时（例如，通过单击鼠标从 a 的下拉列表中选择一个值，从 的日期选择器中选择一个日期，在 的文件选择器中选择一个文件等）；

参考：How can I trigger an onchange event manually?

Answer 2

这对我有用：

document.getElementById('selct').dispatchEvent(new Event('change'));