原生 select multiple 的 Ctrl 多选仅在渲染为多行列表时生效；若被 CSS 强制单行、appearance: none 未补全逻辑、overflow: hidden 裁剪或动态设置属性未重排，均会失效；移动端无 Ctrl，需全屏选择器；拖拽多选需自实现或用库；后端接收须 name="xxx[]"。
select multiple 默认就是按 Ctrl 多选，但必须满足前提条件
不是加了 multiple 属性就一定能用 Ctrl 多选——浏览器只在 select 元素**渲染为多行列表样式**时才启用该交互。如果它被 CSS 强制显示成单行（比如 height: 2rem + overflow: hidden），或者被包裹在某些 UI 框架的封装组件里，Ctrl 点击就失效。
验证方式很简单：直接在 HTML 文件里写一个裸露的 <select multiple>，不加任何 CSS，打开页面，用鼠标点击不同选项，同时按住 Ctrl —— 正常情况下会高亮多个项。
为什么有时候 Ctrl 多选没反应？常见干扰项
以下情况会让 multiple 表现异常，本质是破坏了原生 select 的默认渲染行为：
-
select被设置了固定height且小于容纳两项所需高度（例如height: 30px） - 用了
appearance: none却没补全自定义下拉逻辑（此时连下拉箭头都消失，更别说多选了） - 父容器或自身设置了
overflow: hidden，裁剪了选项区域 - 通过 JS 动态设置
multiple属性，但未触发重排（极少见，但存在）
移动端和 Safari 的特殊表现
iOS Safari 和大部分安卓浏览器根本不支持 Ctrl（也没键盘），它们对 multiple 的处理是：点击一项 → 弹出全屏选择器 → 支持勾选多个 → 点完成才回填。这不是 bug，是平台交互规范。
立即学习“前端免费学习笔记（深入）”；
所以如果你在做跨端表单，别指望用户在手机上“按住 Ctrl”，得配合提示文案，比如：<small>（iOS/Android 上请逐个勾选后点击「完成」）</small>
想用鼠标拖拽连续选中？原生不支持，得自己实现
原生 <select multiple> 只响应 Ctrl/Cmd 单点、Shift 连续点击（从当前选中项到点击项之间全部选中），**不支持鼠标按住拖拽划过选中**。
如果真需要拖拽多选，有两条路：
- 放弃
select，改用<div>+<input type="checkbox">模拟，自己监听mousedown/mousemove实现 - 用成熟库如
react-select（配isMulti）或Choices.js，它们内部已封装拖拽逻辑
注意：任何模拟方案都要手动同步到真实 <select> 或提交数据，否则表单提交时拿不到值。
最易忽略的一点：服务端接收多选值时，很多后端框架（比如 PHP 的 $_POST['name']、Node.js 的 req.body.name）默认只取第一个值——必须确保 name 属性以 [] 结尾，例如 name="fruit[]"，否则后端只能收到最后一个选中的项。
