Question

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

我正在动态创建select标签的选项。我不知道选项标签的值。

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

＆＃13;

function callFunc(obj) {
  console.log(obj.value);
}

setTimeout(() => {
  $("#select1")[0].selectedIndex = 2;
}, 2000);

＆＃13;

<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>

＆＃13;

Answer 1

您需要在元素上调用change()来触发更改。我已将[{1}}替换为selectedIndex函数的调用。还使用javascript附加事件处理程序，而不是通过标记。

＆＃13;

val

＆＃13;

const select = $("#select1");

select.on('change', function() {
  console.log(this.value);
});

setTimeout(() => {
  select.val(2).change();
}, 2000);

＆＃13;

Answer 2

您可以使用jQuery的触发器功能。

function callFunc(obj) {
  console.log(obj.value);
}


setTimeout(function(e){ $("#select1").val(2).trigger('change'); }, 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 3

..或使用VanillaJS（相对于event constructors偏爱createEvent）：

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

setSelectedIndex(select1, 2);

设置selectedindex不会触发onchange事件

3 个答案: