Select2 v4.0.13预填默认值时sorter回调不触发问题求助

问题原因 #

1. sorter触发时机限制：Select2的sorter回调仅在下拉菜单初始化、数据源更新或下拉菜单被打开时执行。你使用的val().trigger('change')仅用于更新选中状态，不会触发sorter的排序逻辑。
2. 默认置顶行为覆盖排序：即使sorter执行了，Select2默认会将已选中的项移到下拉列表顶部，这会覆盖你自定义的排序结果，导致看起来排序完全未生效。

解决办法 #

办法一：修改预填值方式，触发sorter执行

放弃直接用val()设置选中值，改用select2('data')方法传入选中数据，同时确保数据源已按你的规则排序：

// 假设原始选项数据存储在originalData变量中
const selectedIds = ["X"];
// 筛选出需要选中的项
const selectedItems = originalData.filter(item => selectedIds.includes(item.id));

// 初始化Select2并设置选中项
selectElement.select2({
  placeholder: o.placeholder,
  multiple: o.multiSelect,
  closeOnSelect: !o.multiSelect,
  maximumSelectionLength: 10,
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text))
}).select2('data', selectedItems).trigger('change');

如果是远程数据源，设置选中值后需要手动触发查询来激活sorter：

selectElement.select2('val', ["X"]).trigger('change');
// 触发空查询，强制sorter执行
selectElement.select2('trigger', 'query', {term: ''});

办法二：禁用已选项置顶行为

由于你已经使用了resultsAdapter，可以重写该适配器来取消默认的已选项置顶逻辑，让自定义排序结果完全生效：

// 自定义ResultsAdapter，继承默认适配器
const CustomResultsAdapter = $.fn.select2.amd.require('resultsAdapter');
$.fn.select2.amd.define('customResultsAdapter', [], function() {
  return function(decorated, $element, options) {
    CustomResultsAdapter.call(this, $element, options);
    decorated.call(this, $element, options);

    // 重写render方法，跳过已选项置顶逻辑
    this.render = decorated.decorate(this.render, function(originalRender) {
      return function(data, params) {
        // 直接使用排序后的data，不做置顶处理
        return originalRender.call(this, data, params);
      };
    });
  };
});

// 初始化Select2时使用自定义适配器
_createCustomSelect = function(o, select) {
  select.select2({
    placeholder: o.placeholder,
    multiple: o.multiSelect,
    closeOnSelect: !o.multiSelect,
    maximumSelectionLength: 10,
    resultsAdapter: $.fn.select2.amd.require('customResultsAdapter'),
    sorter: data => data.sort((a, b) => a.text.localeCompare(b.text))
  });
};

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