修改Select2下拉框innerHTML后未实际选中选项，如何用JS批量设置？

架构老林

2026-8-3

批量设置所有Select2下拉框选中“Excellent”

直接修改.select2-choice的innerHTML只是换了个显示文本，根本没更新原生下拉框的选中状态，Select2内部的状态也没同步。要实现真正的选中，得操作原生<select>元素，再同步Select2的状态，给你两种可行的方法：

方法一：用Select2官方API（推荐）

要是页面里已经引入了jQuery和Select2，直接用官方API最稳妥：

// 遍历所有下拉框，只处理被Select2初始化过的
document.querySelectorAll('select').forEach(selectEl => {
  if ($(selectEl).data('select2')) {
    // 找到显示文本为-Excellent-的选项（根据实际情况改，比如选项文本是Excellent就去掉横杠）
    const excellentOption = Array.from(selectEl.options).find(opt => opt.textContent.trim() === '-Excellent-');
    if (excellentOption) {
      // 设置选中并触发change事件，让Select2同步状态
      $(selectEl).val(excellentOption.value).trigger('change');
    }
  }
});

方法二：原生JS操作（不用jQuery）

不想依赖jQuery的话，就直接操作原生select再触发事件：

// 遍历所有Select2的容器
document.querySelectorAll('.select2-container').forEach(container => {
  // 通过data-select2-id找到对应的原生select
  const selectId = container.getAttribute('data-select2-id');
  const selectEl = document.querySelector(`select[data-select2-id="${selectId}"]`);
  if (!selectEl) return;
  
  // 找到Excellent对应的选项
  const excellentOption = Array.from(selectEl.options).find(opt => opt.textContent.trim() === '-Excellent-');
  if (excellentOption) {
    // 设置原生select的选中值
    selectEl.value = excellentOption.value;
    // 触发change事件，让Select2更新显示
    selectEl.dispatchEvent(new Event('change', { bubbles: true }));
  }
});