jQuery中自动触发select标签onchange事件失败的问题求助

嘿，我来帮你搞定这个select事件触发的问题！你遇到的核心问题其实是事件名称写错了，而且jQuery本身就有更省心的方法来触发事件，不用手动折腾原生Event对象。

问题出在哪？ #

你代码里写了new Event('onchange')，但原生DOM事件的真实名称是change——onchange只是元素上挂的事件处理函数的属性名，不是事件本身的名字。这就导致你dispatch事件后，浏览器根本认不出这个事件，自然不会触发绑定的逻辑。

两种修正方案任你选 #

方案1：用jQuery的trigger()（最省事）

jQuery已经封装好了触发事件的方法，直接调用trigger('change')就能完美触发你绑定的onchange逻辑，代码还简洁：

$(document).ready(function() {
  // 选中第一个select元素
  const $firstSelect = $("select:first-of-type");
  // 设置选中值为"2"
  $firstSelect.val("2");
  // 手动触发change事件
  $firstSelect.trigger("change");
});

方案2：原生DOM方式（修正事件名称）

要是你更习惯用原生API，只要把事件名称改成change就行：

$(document).ready(function() {
  // 拿到原生DOM元素（jQuery对象加[0]就能获取）
  const firstSelect = $("select:first-of-type")[0];
  firstSelect.value = "2";
  // 创建正确的change事件，开启冒泡
  const event = new Event('change', { bubbles: true });
  // 触发事件
  firstSelect.dispatchEvent(event);
});

额外说两句 #

为啥代码改value后不会自动触发事件？这是浏览器的默认规则：只有用户手动点击选择选项时，才会自动触发change事件；通过JS代码修改value的话，必须手动触发事件才行。jQuery的trigger()还能模拟事件冒泡，和用户手动操作的行为几乎一致，用起来更顺手。

内容的提问来源于stack exchange，提问作者David Bustard