jQuery Select2 如何实现AJAX单选项时页面加载自动选中

问题根因 #

现在的逻辑无法达到预期，核心是两个机制层面的问题：

• Select2 配置的远程ajax数据源默认是懒加载触发的，只有用户点击展开下拉、在搜索框输入内容时，才会按配置规则发起接口请求。页面初始化完Select2实例的阶段，根本不会主动调用远程接口，你写在processResults里的单结果自动选中逻辑，自然没有对应的执行入口。
• 原有代码在processResults里手动给原生select元素append option、再触发change的写法，会打乱Select2内部维护的结果缓存与DOM同步逻辑，很容易出现选中值不显示、回显异常、选项重复的问题。

实现步骤 #

• 把单结果自动选中的逻辑抽成独立的公共函数，避免重复写相同的判断逻辑
• 保留原有Select2的基础配置，把原流程中硬操作DOM的自动选中逻辑，替换为调用这个公共函数，覆盖用户输入搜索时返回单结果的场景
• 页面初始化完成Select2实例后，手动按照完全一致的接口参数，拉取一次无搜索词的全量结果，补上页面加载阶段的自动选中触发入口
• 不管是用户搜索返回的结果，还是初始化阶段拉取的全量结果，只要结果总数为1，就通过Select2官方API设置选中值，不手动修改原生DOM

修正后代码参考 #

// 公共判断函数：如果返回结果只有1条，自动选中
function autoSelectIfSingle(resultList) {
  if (resultList.length === 1) {
    const singleItem = resultList[0];
    $('#dropdownElem').val(singleItem.id).trigger('change');
  }
}

// 初始化Select2实例
$('#dropdownElem').select2({
  placeholder: 'Select From Dropdown',
  allowClear: true,
  ajax: {
    quietMillis: 10,
    cache: false,
    dataType: 'json',
    type: 'GET',
    url: function() {
      return '/api/'
    },
    data: function(params) {
      return {
        model__icontains: params.term || ''
      };
    },
    processResults: function(data) {
      // 统一映射接口返回的数据格式
      const mappedResults = $.map(data['modelDocs'], function(obj) {
        return {
          id: obj.id,
          text: obj.modelDoc
        };
      });
      // 触发自动选中判断，覆盖用户搜索的场景
      autoSelectIfSingle(mappedResults);
      return {
        results: mappedResults
      };
    },
  },
});

// 页面初始化阶段，手动主动拉一次全量结果，补全触发入口
$.ajax({
  url: '/api/',
  type: 'GET',
  dataType: 'json',
  data: {
    model__icontains: '' // 与Select2的空搜索参数保持完全一致
  }
}).done(function(initData) {
  const initResultList = $.map(initData['modelDocs'], function(obj) {
    return {
      id: obj.id,
      text: obj.modelDoc
    };
  });
  // 走统一的判断逻辑，实现页面刚加载就自动选中单条结果的效果
  autoSelectIfSingle(initResultList);
});

注意事项 #

• 手动发起的初始化请求，接口地址、请求参数必须和Select2配置的ajax参数完全一致，否则会出现初始化判断的结果和用户点开下拉看到的列表不匹配的问题
• 初始化阶段直接触发change.select2没有实际作用，这时候Select2还没拉取任何远程结果，触发了也不会产生有效的状态更新
• 不要在processResults流程中手动给原生select元素塞option节点，Select2会自行管理结果列表的渲染逻辑，手动改DOM极易引发状态不同步的问题

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