如何按选择顺序获取带复选框的多选下拉框选中值

这个问题我之前也踩过坑！不管是原生的<select multiple>还是常见的UI库多选组件，默认都会按选项在DOM里的原始顺序返回选中值，想要拿到用户实际选择的顺序，核心思路是自己手动维护一个独立的数组来记录选择流程，而不是依赖组件自带的返回值。下面分两种场景给你具体实现方案：

原生HTML多选下拉框的实现 #

原生的<select multiple>没有直接提供选择顺序的API，我们可以通过监听change事件，手动同步选中状态到自定义数组：

<select id="multiSelect" multiple style="height: 100px;">
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

const multiSelect = document.getElementById('multiSelect');
// 用来存储选择顺序的数组
const selectedOrder = [];

multiSelect.addEventListener('change', function() {
  // 拿到当前所有选中的选项
  const currentSelected = Array.from(this.selectedOptions).map(opt => opt.value);
  
  // 步骤1：把新选中的选项追加到数组末尾（避免重复添加）
  currentSelected.forEach(value => {
    if (!selectedOrder.includes(value)) {
      selectedOrder.push(value);
    }
  });
  
  // 步骤2：移除已经取消选中的选项
  selectedOrder.forEach((value, index) => {
    if (!currentSelected.includes(value)) {
      selectedOrder.splice(index, 1);
    }
  });
  
  // 现在selectedOrder就是用户选择的顺序了
  console.log('选择顺序:', selectedOrder);
});

常见UI库（以Select2为例）的实现 #

如果用的是像Select2这类流行的UI组件，它们会提供更精准的选中/取消选中事件，直接监听这些事件来维护数组更高效：

// 初始化Select2
$('#multiSelect').select2();

const selectedOrder = [];

// 监听选中事件
$('#multiSelect').on('select2:select', function(e) {
  const selectedValue = e.params.data.id;
  if (!selectedOrder.includes(selectedValue)) {
    selectedOrder.push(selectedValue);
  }
});

// 监听取消选中事件
$('#multiSelect').on('select2:unselect', function(e) {
  const unselectedValue = e.params.data.id;
  const index = selectedOrder.indexOf(unselectedValue);
  if (index !== -1) {
    selectedOrder.splice(index, 1);
  }
});

// 随时可以通过selectedOrder拿到选择顺序
console.log('选择顺序:', selectedOrder);

核心要点总结 #

• 不要依赖组件返回的values数组，它几乎都是按原始选项顺序排列的
• 自己维护一个数组，选中时追加到末尾，取消时移除对应项，就能完美保留选择顺序
• 其他UI库（比如Chosen、AntD Select等）的实现逻辑类似，只需要找到对应的选中/取消事件即可

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