如何为基于Ajax加载数据的Select2组件设置默认值？

我来帮你搞定这个问题，结合你给出的代码片段，分两种Select2版本的常见场景来讲解解决方案：

场景1：你用的是Select2 3.x版本（有initSelection参数） #

你的代码里initSelection方法没写完，这正是3.x版本设置初始选中值的关键！它的作用是在组件初始化时，根据<select>元素的现有值，去获取对应的选项文本并设置选中状态。

补全后的完整代码如下：

$('.shipper').select2({
  placeholder: "Choose Shipper",
  selectionTitleAttribute: false,
  ajax: {
    url: 'getCustomer.php',
    dataType: 'json',
    data: function (params) {
      return { filter_name: params.term };
    },
    processResults: function (data) {
      return { 
        results: $.map(data, function (obj) {
          return {id: obj.customer_id, text: obj.name};
        }) 
      };
    },
    cache: true
  },
  initSelection: function (element, callback) {
    // 先拿到select标签上预设的默认值（比如页面渲染时写的value="123"）
    var defaultId = $(element).val();
    
    if (defaultId) {
      // 通过Ajax请求获取这个ID对应的客户信息
      $.ajax({
        url: 'getCustomer.php',
        dataType: 'json',
        // 这里要注意：如果你的接口支持按ID查询，就传customer_id，否则可能需要调整参数
        data: { customer_id: defaultId }, 
        success: function(data) {
          // 从返回数据里找到匹配的那一项
          var matchedItem = data.find(obj => obj.customer_id == defaultId);
          // 调用callback把选中项传给Select2
          callback({ id: matchedItem.customer_id, text: matchedItem.name });
        }
      });
    }
  }
});

⚠️ 重要提醒：

• 页面渲染时，要给<select class="shipper">设置value属性，比如<select class="shipper" value="123"></select>，这样initSelection才能拿到默认ID。
• 你的getCustomer.php接口需要支持按ID查询单个客户，如果当前接口只支持按名称搜索，得调整接口逻辑或者新增一个接口来根据ID获取客户数据。

场景2：你用的是Select2 4.0+版本（initSelection已废弃） #

4.0之后的Select2移除了initSelection，推荐用更直接的方式设置默认值：

方式A：提前添加默认选项并选中 #

初始化Select2之后，直接往<select>里加一个预设的<option>，然后触发change事件让Select2识别：

// 先初始化Select2
$('.shipper').select2({
  placeholder: "Choose Shipper",
  selectionTitleAttribute: false,
  ajax: {
    url: 'getCustomer.php',
    dataType: 'json',
    data: function (params) {
      return { filter_name: params.term };
    },
    processResults: function (data) {
      return { 
        results: $.map(data, function (obj) {
          return {id: obj.customer_id, text: obj.name};
        }) 
      };
    },
    cache: true
  }
});

// 设置默认值：替换成你的实际ID和名称
var defaultCustomer = { id: "123", text: "默认物流公司" };
$('.shipper')
  .append(new Option(defaultCustomer.text, defaultCustomer.id, true, true))
  .trigger('change');

方式B：直接用val()+trigger('change')（需提前知道文本） #

如果你已经知道默认选项的文本，也可以这么写：

$('.shipper').val("123").trigger('change');

但要注意：Select2 4.0+要求选中的项必须存在于组件的选项列表中，所以如果默认项不在Ajax初始加载的结果里，一定要先通过append添加选项，不然Select2不会显示正确的文本。

通用注意事项 #

• 确保默认值的id和text和Ajax返回的字段完全匹配，差一个字符都可能导致Select2识别失败。
• 如果你的页面是动态渲染的（比如通过其他Ajax加载内容），一定要等<select>元素出现在DOM里之后，再初始化Select2和设置默认值。

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