如何防止多选下拉框清除已选中的选项？

原生<select multiple>下拉框有个默认行为：用户未按住Ctrl（Windows）/Command（Mac）点击选项时，会自动取消所有已选中的选项，只保留当前点击的选项。你之前用click事件阻止默认行为没用，因为click事件是在浏览器完成默认选择操作之后触发的，根本拦不住。

正确的做法是监听mousedown事件（这个事件在浏览器执行默认选择行为前触发），判断用户是否按住了Ctrl/Command键，没按住的话就手动控制选项的选中状态，保留已选内容：

$(document).ready(function() {
    $("#selectID").on('mousedown', function(e) {
        // 兼容Windows的Ctrl键和Mac的Command键
        const hasModifierKey = e.ctrlKey || e.metaKey;
        if (!hasModifierKey) {
            e.preventDefault();
            // 确保点击的是option元素
            if (e.target.tagName === 'OPTION') {
                // 切换当前选项的选中状态，不影响其他已选项
                e.target.selected = !e.target.selected;
                // 如果页面有依赖change事件的逻辑，手动触发
                $(this).trigger('change');
            }
        }
    });
});

关键说明 #

1. 用mousedown而非click：只有在这个阶段阻止默认行为，才能拦截浏览器清空已选项的操作
2. 兼容多系统：同时判断ctrlKey和metaKey，覆盖Windows和Mac用户的操作习惯
3. 手动控制选中状态：通过切换selected属性，保留其他已选选项的状态，实现类似按住Ctrl点击的效果
4. 触发change事件：如果你的业务逻辑需要监听下拉框的选中变化，手动触发change事件可以保证后续逻辑正常执行

额外注意 #

• 确保你的下拉框标签带有multiple属性，比如：<select id="selectID" multiple></select>
• 如果下拉框的选项是动态生成的，需要改用事件委托，比如：

  $(document).on('mousedown', '#selectID option', function(e) {
      const hasModifierKey = e.ctrlKey || e.metaKey;
      if (!hasModifierKey) {
          e.preventDefault();
          this.selected = !this.selected;
          $(this).closest('select').trigger('change');
      }
  });
  

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