如何用JavaScript设置Select2选中选项并同步界面显示？

你遇到的核心问题是：Select2是基于原生<select>封装的组件，直接修改原生select的value不会自动同步到Select2的UI渲染层，必须手动通知组件更新界面。

方法1：使用Select2官方API设置值 #

直接调用Select2专属的val()方法，它会自动同步UI显示：

function Submit() {
  var row_id = $('#InputRow').val();

  if (row_id)
  {
    $('#my_select').select2('val', row_id);
  }
}

方法2：修改原生值后触发change事件 #

如果偏好原生DOM操作，修改值后需要手动触发change事件，让Select2感知到变化并更新界面：

function Submit() {
  var row_id = $('#InputRow').val();

  if (row_id)
  {
    // jQuery写法
    $('#my_select').val(row_id).trigger('change');
    
    // 原生JS写法（可选）
    // var select = document.getElementById('my_select');
    // select.value = row_id;
    // select.dispatchEvent(new Event('change'));
  }
}

关键注意点 #

• 确保row_id的值和<option>的value属性完全匹配（比如option的value是字符串类型时，row_id最好也保持字符串格式，Select2通常会自动处理类型转换，但严格匹配能避免意外问题）
• 必须在Select2完成初始化后执行上述操作，否则API调用会失效

内容的提问来源于stack exchange，提问作者Litvin Vlad