Select2远程AJAX分组数据未设置aria-selected选中状态问题

我完全懂你碰到的这个坑——用带分组的远程AJAX数据源时，明明返回的子项里已经标了selected: true，但Select2就是不把这个状态同步到DOM的aria-selected属性上，也没自动选中这些项。

问题根源 #

Select2默认的结果处理逻辑只认每个选项的id和text字段，对于分组结构里子项的selected属性，它不会自动读取并应用到渲染后的元素上，相当于直接忽略了这个标记。

解决方案 #

我们可以通过Select2的两个核心配置项来搞定这个问题，结合使用效果更好：

方法1：用templateResult手动设置aria-selected属性

这个方法会在渲染每个选项的时候，根据返回数据里的selected字段，给对应的DOM元素加上正确的属性：

$('select').select2({
  ajax: {
    url: '你的远程接口地址',
    dataType: 'json',
    processResults: function(data) {
      // 保留原有的分组结构即可，不用修改数据
      return {
        results: data.results
      };
    }
  },
  templateResult: function(item) {
    // 处理分组标题（带children的项）
    if (item.children) {
      return $('<span>' + item.text + '</span>');
    }
    // 处理子选项，根据selected字段设置aria-selected
    var $option = $('<span>' + item.text + '</span>');
    if (item.selected === true) {
      $option.attr('aria-selected', 'true');
    }
    return $option;
  }
});

方法2：结合processResults自动选中标记项

如果你不仅要设置aria-selected，还希望Select2自动把这些标记为selected: true的项设为选中状态，可以在处理返回数据时收集这些项的ID，再同步到Select2的选中值里：

$('select').select2({
  ajax: {
    url: '你的远程接口地址',
    dataType: 'json',
    processResults: function(data) {
      // 收集所有选中项的ID
      var selectedIds = [];
      data.results.forEach(function(group) {
        group.children.forEach(function(item) {
          if (item.selected === true) {
            selectedIds.push(item.id.toString());
          }
        });
      });
      
      // 异步设置选中值（确保AJAX数据加载完成后再执行）
      setTimeout(function() {
        $('select').val(selectedIds).trigger('change');
      }, 0);
      
      return {
        results: data.results
      };
    }
  },
  // 搭配templateResult确保aria-selected属性正确
  templateResult: function(item) {
    if (item.children) {
      return $('<span>' + item.text + '</span>');
    }
    var $option = $('<span>' + item.text + '</span>');
    if (item.selected === true) {
      $option.attr('aria-selected', 'true');
    }
    return $option;
  }
});

小提示 #

• 如果是单选模式，把selectedIds换成单个ID即可，不用数组。
• 使用setTimeout是因为AJAX是异步请求，要等Select2渲染完结果再设置选中值，避免无效操作。
• 上述方法兼容Select2 4.x版本，这也是目前最常用的稳定版本。

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