如何覆盖单选select默认事件监听器使其实现类似多选的交互

首先明确：你要的交互没法通过修改原生单选select的事件监听实现。原生不携带multiple属性的select控件，其单选逻辑、选中后自动收起下拉框的行为都是浏览器内核内置的，JS无法拦截或修改：

• change事件是选中操作完成后才触发的，此时默认行为已经执行完了，调用event.preventDefault()没有任何效果
• 原生单选select的DOM规范只允许同时有一个option处于selected状态，没办法标记多个选中项

低成本替代实现方案 #

我们可以用带multiple属性的select，通过CSS和JS模拟原生单选select的外观和你要的交互，代码如下：

<!DOCTYPE HTML>
<meta charset="UTF-8">
<html>
<head>
<style>
/* 把multiple select伪装成普通单选select的外观 */
select[multiple] {
  height: 28px;
  width: 200px;
  appearance: auto; /* 保留原生下拉箭头 */
  overflow: hidden;
}
</style>
</head>
<body>
<!-- 加multiple属性 -->
<select id="varSel" name="varSel" multiple>
  <option value="1">Variable 1</option>
  <option value="2">Variable 2</option>
  <option value="3">Variable 3</option>
  <option value="4">Variable 4</option>
  <option value="5">Variable 5</option>
</select>

<script>
const varSelector = document.getElementById("varSel");
let isCtrlDown = false;
let choices = [];

// 监听Ctrl键状态
document.addEventListener('keydown', e => {
  if (e.key === "Control") {
    isCtrlDown = true;
    // 按下Ctrl时展开下拉，size设为选项总数
    varSelector.size = varSelector.options.length;
  }
});

document.addEventListener('keyup', e => {
  if (e.key === "Control") {
    isCtrlDown = false;
    // 松开Ctrl时收起下拉
    varSelector.size = 1;
    // 同步选中值到choices数组
    choices = Array.from(varSelector.selectedOptions).map(opt => opt.value);
    console.log('当前选中：', choices);
  }
});

// 监听选项点击
varSelector.addEventListener('click', e => {
  if (!isCtrlDown) {
    // 没按Ctrl的时候只保留当前选中项
    Array.from(varSelector.options).forEach(opt => opt.selected = false);
    e.target.selected = true;
    choices = [e.target.value];
    console.log('当前选中：', choices);
    // 自动收起
    varSelector.size = 1;
  }
  e.preventDefault();
});
</script>
</body>
</html>

实现效果说明 #

• 常规状态下和原生单选select外观、交互完全一致，点击弹出下拉，选中就收起
• 按住Ctrl键点击时可多选，所有选中项都会标记高亮，下拉不会自动收起
• 松开Ctrl键后下拉自动收起，会同步输出所有选中的值

补充建议 #

如果需要更一致的跨浏览器表现、支持搜索等扩展功能，建议直接使用前端UI组件库的多选下拉组件，这类组件已经封装好了对应的交互逻辑，不需要自己处理原生控件的兼容性问题。

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