如何在JavaScript中获取多选select最后选中的option（非jQuery）

原生<select multiple>的onchange事件里，直接用select.value拿不到最后选中的选项——因为多选场景下，这个属性只会返回第一个被选中的选项值，和用户最后操作的选项无关。

要实现需求，得通过对比前后选中的选项集合来找出最后新增的那个选项，具体代码如下：

实现代码 #

HTML结构 #

<select multiple="multiple" id="multiSelect">
  <option value="opt1">选项1</option>
  <option value="opt2">选项2</option>
  <option value="opt3">选项3</option>
  <option value="opt4">选项4</option>
</select>

JavaScript逻辑 #

// 获取多选select元素
const multiSelect = document.getElementById('multiSelect');
// 保存上一次选中的选项值集合
let previousSelectedValues = [];

// 绑定change事件
multiSelect.addEventListener('change', function() {
  // 提取当前所有选中选项的value值
  const currentSelectedValues = Array.from(this.selectedOptions).map(opt => opt.value);
  
  // 对比前后集合，找出新增的选项（即最后选中的）
  const lastSelectedValue = currentSelectedValues.find(val => !previousSelectedValues.includes(val));
  
  if (lastSelectedValue) {
    // 根据value找到对应的option元素，获取内容
    const lastSelectedOption = this.querySelector(`option[value="${lastSelectedValue}"]`);
    console.log('最后选中的选项内容:', lastSelectedOption.textContent);
    console.log('最后选中的选项值:', lastSelectedValue);
  } else {
    // 这里是用户取消选中选项的场景，可按需添加处理逻辑
    console.log('用户取消了某个选项的选中状态');
  }
  
  // 更新历史选中集合，用于下次对比
  previousSelectedValues = [...currentSelectedValues];
});

注意事项 #

• 该方法支持普通点击、Ctrl/Cmd+点击的多选场景，能准确捕捉用户最后点击选中的选项
• 若使用Shift键批量选中，change事件会在批量选择完成后触发一次，此时lastSelectedValue会是批量中第一个新增的选项；如果需要针对Shift场景做更精准的处理，可结合mousedown事件记录点击的选项元素（不过大部分场景下上述代码足够覆盖需求）

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