Select2多选选择器默认选中项设置方法求助

我经常碰到开发者在Select2多选组件上卡壳在默认选中这一步——其实核心逻辑很简单，要么让原生<select>的选项先处于选中状态，要么在初始化时给Select2传递预设的选中数据，再配合正确的事件触发就行。下面分两种最常见的场景给你具体方案：

场景1：基于本地静态选项的Select2 #

如果你的选项是提前写在<select>标签里的，直接给需要默认选中的<option>加上selected属性，再初始化Select2就搞定了：

<!-- 给需要默认选中的option加selected属性 -->
<select id="multi-select" multiple="multiple">
  <option value="user1" selected>Alice</option>
  <option value="user2">Bob</option>
  <option value="user3" selected>Charlie</option>
</select>

<script>
// 正常初始化Select2即可，它会自动识别选中状态
$('#multi-select').select2({
  placeholder: '选择用户'
});
</script>

场景2：动态数据/初始化后设置默认选中 #

如果你的选项是动态加载（比如远程AJAX），或者需要在页面加载完成后再设置默认值，用val()方法传入选中值的数组，然后必须触发change事件——这是很多人漏掉的关键步骤，不然Select2的UI不会同步更新：

// 假设你要选中user1和user3
$('#multi-select').val(['user1', 'user3']).trigger('change');

如果是远程AJAX加载数据的情况，还可以在初始化时通过data参数直接传入默认选中项（注意格式必须包含id和text，和AJAX返回的数据结构一致）：

$('#multi-select').select2({
  ajax: {
    url: '/api/get-users',
    dataType: 'json',
    processResults: function(data) {
      return {
        results: data.map(item => ({id: item.id, text: item.name}))
      };
    }
  },
  // 设置默认选中项
  data: [
    {id: 'user1', text: 'Alice'},
    {id: 'user3', text: 'Charlie'}
  ]
});

常见坑提醒 #

• 不要忘了触发change事件：用val()设置值后，必须调用.trigger('change')，否则Select2界面不会刷新显示选中状态。
• 确保值匹配：默认选中的value（或id）必须和Select2选项的id完全一致，大小写、格式都不能错。
• 动态数据要先加载完成：如果是AJAX获取的选项，最好在AJAX请求完成后再设置默认值，或者用上面的data参数预设。

内容的提问来源于stack exchange，提问作者Joost Dübken