Select2.js多选下拉框：如何按选择顺序获取选中值？

嘿，我刚好处理过不少Select2多选场景下的顺序问题，给你两个实用的解决方案，亲测有效：

方法一：通过事件监听维护顺序数组（推荐） #

Select2提供了select2:select和select2:unselect事件，我们可以利用这两个事件手动维护一个按选择顺序排列的数组，这种方法不依赖DOM结构，兼容性更好：

// 初始化数组存储选中项的顺序
let selectedItemsInOrder = [];

// 绑定选中事件
$('#your-select2-id').on('select2:select', function(e) {
  const selectedData = e.params.data;
  // 防止重复添加（如果用户重复选择同一选项）
  const isAlreadySelected = selectedItemsInOrder.some(item => item.id === selectedData.id);
  if (!isAlreadySelected) {
    selectedItemsInOrder.push({
      id: selectedData.id,
      text: selectedData.text
    });
  }
});

// 绑定取消选中事件，从数组中移除对应项
$('#your-select2-id').on('select2:unselect', function(e) {
  const unselectedData = e.params.data;
  selectedItemsInOrder = selectedItemsInOrder.filter(item => item.id !== unselectedData.id);
});

// 当你需要获取顺序一致的选中值时，直接提取数组即可
// 获取ID数组：
const orderedIds = selectedItemsInOrder.map(item => item.id);
// 获取文本数组：
const orderedTexts = selectedItemsInOrder.map(item => item.text);

console.log('按选择顺序的ID:', orderedIds);
console.log('按选择顺序的文本:', orderedTexts);

方法二：直接从Select2生成的DOM中提取顺序 #

如果你不想维护额外的数组，也可以直接遍历Select2渲染出的选中项DOM元素，它们的排列顺序就是用户的选择顺序：

function getSelectedOrderFromDOM() {
  const orderedIds = [];
  // 找到Select2生成的选中项容器
  $('#your-select2-id').next('.select2-container')
    .find('.select2-selection__choice')
    .each(function() {
      // 从data-select2-id属性中提取选项ID（格式类似"select2-your-select2-id-xx"）
      const fullId = $(this).attr('data-select2-id');
      const itemId = fullId.split('-').pop();
      orderedIds.push(itemId);
      
      // 如果需要文本的话，直接取元素内的文本：
      // const itemText = $(this).text().trim();
    });
  return orderedIds;
}

// 调用函数获取顺序数组
console.log('从DOM提取的选中顺序ID:', getSelectedOrderFromDOM());

注意事项 #

• 方法一的可靠性更高，因为它基于Select2的官方事件API，不会因为Select2版本更新导致DOM结构变化而失效；
• 方法二需要注意不同Select2版本的DOM类名或属性可能略有差异，使用前最好检查一下当前版本的DOM结构。

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