如何用纯JS设置Select2的值并正确触发关联事件？

直接操作原生<select>元素或者模拟点击Select2生成的UI元素没效果，核心原因是Select2封装了自己的事件系统和状态管理，得用它的官方API来操作才能触发联动逻辑：

• 用jQuery+Select2 API设置值并触发事件
  先把原生的orgSelect转为jQuery对象，然后用Select2的val()方法设置选中值，再通过jQuery触发change事件（这会同步触发Select2内部的联动逻辑）：

  // 转为jQuery对象
  const $orgSelect = $(orgSelect);
  // 选中第一个非空选项（可根据需求调整目标值）
  const targetOrgValue = $orgSelect.find('option[value!=""]').first().val();
  // 设置值并触发事件
  $orgSelect.val(targetOrgValue).trigger('change');
  

• 如果上述方法无效，试试触发Select2专属事件
  部分页面的联动逻辑绑定在Select2的select2:select事件上，这时候可以额外触发这个事件：

  $orgSelect.val(targetOrgValue).trigger('select2:select');
  // 保险起见再触发一次原生change事件
  $orgSelect.trigger('change');
  

• 确保脚本在Select2初始化完成后执行
  GreaseMonkey脚本如果加载过早，Select2还没初始化，操作会无效。可以在脚本元信息里添加@run-at document-idle，或者用延迟执行：

  // 延迟1秒执行（时间可根据页面加载速度调整）
  setTimeout(() => {
    // 这里放置上述设置代码
  }, 1000);
  

简单说，Select2会隐藏原生<select>并渲染自定义UI，原生元素的事件无法同步到它的内部状态，必须通过官方API操作，才能让Select2更新UI并触发关联的联动逻辑。

内容的提问来源于stack exchange，提问作者Eduard Kolodka