javascript - 如何在 javascript 中更改下拉列表的值并触发 onchange 函数

Question

我想知道是否可以动态更改下拉框的值并同时触发分配给该下拉列表的 ajax onchange 函数。

到目前为止，我只能更改下拉框的值，但 onchange 函数没有被调用。

这是下拉菜单:

<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
  <option value="">--Select Item--</option>
  <option value="one"> Option one</option>
  <option value="two"> Option Two</option>
  <option value="three"> Option Three</option>
</select>

当我执行此操作时:

document.getElementById("ProductSelector").value = "one";

下拉列表的值正在更改，但 getItems 函数没有被触发。

我做错了什么，或者可能有另一种方法来改变 doropdown 的值，这也将允许我触发我的 ajax 函数？

我不想使用 JQuery。我只是想知道为什么如果我使用动态更改该功能不起作用，而在手动更改时它工作正常？

Answer 1

因此，您正在使用 JavaScript 更改值，并且 change 事件未触发。那么，让我们触发它。

每次通过 JavaScript 更改值时都会触发事件 change。

未使用 jQuery。

试试这个:

function changeVal() {
  var elem = document.getElementById("ProductSelector"),
    event = new Event('change');

  elem.value = "one";
  elem.dispatchEvent(event);
}


function getItems(val) {
  alert(val);
}

changeVal();

<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
  <option value="">--Select Item--</option>
  <option value="one">Option one</option>
  <option value="two">Option Two</option>
  <option value="three">Option Three</option>
</select>