设置选定索引不触发onchange事件

Question

我正在尝试更改标签的selectedindex。但是通过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>

- Shubham

---

你如何动态创建选择语句？ - plonknimbuzz

Answer 1

..或者使用VanillaJS（更偏爱事件构造器而不是createEvent）:

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

setSelectedIndex(select1, 2);

- Ian Carter

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>

- Suren Srapyan

---

如果值是动态的，那么我该如何选择它呢？ - Shubham

没听懂你的意思。能再解释一下吗？ - Suren Srapyan

如果我正在动态创建选项，我该如何获取值以更改索引？我看到select.val(2).change();使用的是选项标签的值。 - Shubham

你仍然可以使用 selectedIndex 的方法，只是在此之后需要在 select 上调用 change() 方法。例如：select[0].selectedIndex = 2; select.change(); - Suren Srapyan

@Shubham 在更改索引之前，您必须知道要更改的索引。 - Lalit

Answer 3

您可以使用jQuery的触发器函数（trigger function）。

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>

- Lalit