设置selectedindex不触发onchange事件

Question

我正在尝试更改选择标签的选定索引。但是通过 jquery 更改索引时不会触发 onchange 事件。

我正在动态地为选择标签创建选项。我不会知道选项标签的值。

还有其他方法可以实现吗？这是我的代码片段。请随意提供意见。

function callFunc(obj) {
  console.log(obj.value);
}

setTimeout(() => {
  $("#select1")[0].selectedIndex = 2;
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" onchange="callFunc(this);">
  <option value='0'>select ....</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

Answer 1

.. 或使用 VanillaJS （优先event constructors于createEvent）：

function setSelectedIndex(el, index){
   el.selectedIndex = index;
   el.dispatchEvent(new Event('change', { bubbles: true }));
}

setSelectedIndex(select1, 2);

Answer 2

您需要自己调用change()元素来触发更改。我已经selectedIndex用val函数的调用替换了。还使用 javascript 附加事件处理程序，而不是通过标记。

const select = $("#select1");

select.on('change', function() {
  console.log(this.value);
});

setTimeout(() => {
  select.val(2).change();
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value='0'>select ....</option>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>