如何设置Select2（Ajax）默认值？问题排查与修复方案

嘿，我来帮你排查Select2 Ajax默认值设置的问题！这类问题我在Stack Overflow上碰到过好多类似案例，通常都出在几个常见环节，咱们一步步来梳理：

1. 没提前创建匹配的默认<option>元素 #

Select2的Ajax模式下，默认值必须对应一个已经存在于<select>标签里的<option>，而且这个option的value要和你Ajax返回数据里的id完全一致，显示文本要匹配text字段。举个例子，如果你的JSON返回是：

{"id": 5, "text": "前端开发部"}

那你得先在HTML里提前加好这个选项：

<select id="deptSelect">
  <option value="5" selected>前端开发部</option>
</select>

再初始化Select2，不然它找不到对应的选项来渲染默认值。

2. 旧版本Select2未配置initSelection（仅3.x版本适用） #

如果你用的是Select2 3.x系列，光加<option>还不够，得在初始化时指定initSelection函数，告诉Select2怎么把默认值渲染出来：

$('#deptSelect').select2({
  ajax: {
    url: '/api/get-departments',
    dataType: 'json',
    // 其他Ajax相关配置（比如data、delay等）
  },
  initSelection: function(element, callback) {
    // 可以直接传入默认值对象，也可以通过AJAX请求获取后回调
    callback({ id: 5, text: '前端开发部' });
  }
});

划重点：Select2 4.x版本已经移除了initSelection，直接用<option>的方式就可以了。

3. 动态设置值后未触发change事件同步界面 #

有时候你明明设置了值，但界面没更新，这大概率是没触发Select2的change事件。可以试试这段代码：

$('#deptSelect').val(5).trigger('change');

如果是通过Ajax请求获取默认值后再设置，记得在回调里执行：

$.get('/api/get-default-dept', function(data) {
  // 用new Option的第四个参数设为true，自动标记为选中状态
  $('#deptSelect').append(new Option(data.text, data.id, true, true)).trigger('change');
});

4. Ajax返回的字段和Select2默认期望不匹配 #

Select2默认要求返回的数据里包含id和text字段，如果你的JSON返回的是自定义字段（比如dept_id和dept_name），那得在初始化时配置processResults来做字段映射：

$('#deptSelect').select2({
  ajax: {
    url: '/api/get-departments',
    dataType: 'json',
    processResults: function(response) {
      return {
        results: response.data.map(item => ({
          id: item.dept_id, // 映射你的ID字段
          text: item.dept_name // 映射你的显示文本字段
        }))
      };
    }
  }
});

这时候你设置默认值的<option>的value也要用dept_id的值，不然Select2匹配不到对应的选项。

5. 初始化顺序搞反了 #

一定要先把默认的<option>添加到<select>里，再初始化Select2。如果先初始化Select2再添加option，Select2不会自动识别这个新增的选项，自然也显示不了默认值。

如果能把你的具体代码和JSON返回数据贴出来，我可以帮你更精准地定位问题哦！

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