如何对Select2已选中标签进行不区分大小写的字母排序？

你通过sorter函数实现了下拉待选选项的排序，但这个函数仅作用于下拉列表，不会影响已选中标签的显示顺序。要让选中标签按不区分大小写的字母序排列（比如Alabama、Austria、Jamaica、United States），需要监听选中/取消选中事件，手动重新排序选中项并更新控件。

实现步骤 #

• 复用已有的不区分大小写排序逻辑，避免重复代码
• 监听select2:select和select2:unselect事件，每次选中或取消选项后触发重新排序
• 重新排序选中项后，清空当前选中状态，再按排序后的顺序重新选中

完整代码示例 #

// 复用的排序函数，不区分大小写比较文本
const caseInsensitiveSort = (a, b) => {
  const aText = a.text.toLowerCase();
  const bText = b.text.toLowerCase();
  if (aText > bText) return 1;
  if (aText < bText) return -1;
  return 0;
};

$('#example1').select2({
  tags: true,
  multiple: true,
  allowClear: true,
  sorter: function(data) {
    return data.sort(caseInsensitiveSort);
  }
})
// 监听选中/取消选中事件
.on('select2:select select2:unselect', function() {
  const $select = $(this);
  // 获取当前所有选中的选项数据
  let selectedItems = $select.select2('data');
  
  // 对选中项进行排序
  selectedItems.sort(caseInsensitiveSort);
  
  // 清空当前选中状态
  $select.val([]).trigger('change');
  
  // 按排序后的顺序重新设置选中
  selectedItems.forEach(item => {
    // 处理自定义标签：用户输入的新标签不在原select的option中，需先添加
    if (!$select.find(`option[value="${item.id}"]`).length) {
      $select.append(`<option value="${item.id}" selected>${item.text}</option>`);
    } else {
      $select.find(`option[value="${item.id}"]`).prop('selected', true);
    }
  });
  
  // 触发change事件更新Select2界面显示
  $select.trigger('change');
});

代码说明 #

1. 复用排序逻辑：把原sorter中的排序规则抽成独立函数，同时用于下拉列表和选中项排序，保证规则统一。
2. 事件监听：select2:select在选中选项时触发，select2:unselect在取消选中时触发，两种场景都需要重新排序。
3. 处理自定义标签：开启tags: true后，用户输入的新标签不会预先存在于原<select>的<option>中，因此重新选中前要先将这些标签对应的<option>添加到DOM中。
4. 更新选中状态：先清空选中，再按排序后的顺序重新设置选中，最后触发change事件让Select2同步界面显示。

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