Question

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

textField

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>，但是select的val3无效。我该如何解决？

Answer 1

使用Java编程地更改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>

在以下情况下，从select标签的MDN docs, change events中触发：

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

引用：How can I trigger an onchange event manually?

Answer 2

为我工作：

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

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

2 个答案: