如何在启用sorter的Select2中选择排序后的下一个/上一个选项？

我用Select2的sorter选项实现了按字母排序下拉选项，同时加了一个按钮用来选中当前选中项的排序后列表中的下一个选项。但现在按钮逻辑有问题：它选中的是原生<select>里的下一个<option>（原生选项没排序），而不是Select2排序后的下一个。我不想通过修改DOM来给原生option排序，这违背了用sorter的初衷，请问怎么才能定位到排序后列表里当前选中项的下一个？

原代码 #

HTML

<select id="employeeSelect">
  <option value="abc">Diane Smith</option>
  <option value="xyz">Tim Carter</option>
  <option value="dmv">Keith Appleton</option>
  <option value="r2d2">Carla Peters</option>
</select>
<button id="nextEmployee">Next</button>

JavaScript

$('#employeeSelect').select2({
  placeholder: '-- select an employee --',
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
})

$('#nextEmployee').on('click', function(){
  $("#employeeSelect > option:selected")
    .prop("selected", false)
    .next()
    .prop("selected", true);
  $('#employeeSelect').trigger('change');
})

问题根源是你直接操作原生<option>元素，但Select2的sorter仅在渲染下拉列表时做排序，不会改动原生DOM的结构。要实现需求，你需要直接调用Select2内部的已排序数据列表，基于这个列表定位下一个选项。

实现步骤 #

• 获取Select2实例，提取经过sorter处理后的排序后数据数组
• 找到当前选中项在排序数组中的索引
• 计算下一个选项的索引（支持循环，最后一项的下一项回到第一项）
• 设置选中下一项并触发change事件

修改后的JavaScript代码 #

$('#employeeSelect').select2({
  placeholder: '-- select an employee --',
  sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
})

$('#nextEmployee').on('click', function(){
  const select2Instance = $('#employeeSelect').data('select2');
  // 获取Select2内部存储的已排序完整选项数据
  const sortedData = select2Instance.dataAdapter.data;
  const currentValue = $('#employeeSelect').val();

  // 处理未选中任何项的情况，默认选中排序后的第一个
  if (!currentValue || sortedData.length === 0) {
    $('#employeeSelect').val(sortedData[0]?.value).trigger('change');
    return;
  }

  // 找到当前选中项在排序列表中的位置
  const currentIndex = sortedData.findIndex(item => item.value === currentValue);
  // 计算下一个索引，取模实现循环
  const nextIndex = (currentIndex + 1) % sortedData.length;
  // 设置选中下一项
  $('#employeeSelect').val(sortedData[nextIndex].value).trigger('change');
})

关键说明 #

• select2Instance.dataAdapter.data：这是Select2内部维护的、经过sorter排序后的选项数组，每个元素包含value和text属性，与原生<option>一一对应。
• 用findIndex定位当前项，完全脱离原生DOM的顺序依赖，确保基于排序后的列表操作。
• 取模运算(currentIndex + 1) % sortedData.length实现循环选中逻辑，避免到最后一项时无法继续切换。

内容的提问来源于stack exchange，提问作者Aaron Dunigan AtLee