真正支持多选的前提是正确添加multiple布尔属性，而非multiple="true"或拼写错误；需配合Ctrl/Cmd点击、Shift连选或拖拽框选，且应显式设置size以提示用户；JS中须用select.selectedOptions获取全部选中值，避免使用select.value；iOS Safari因系统限制基本不支持该特性，移动端应改用自定义复选组件；其CSS样式控制能力极弱，复杂需求需放弃原生方案。
怎么让 <select multiple></select> 真正支持多选
加 multiple 属性是唯一前提，不加它，按住 Ctrl/Cmd 也只会切换当前项，不会累积选中。
常见错误是写了 <select></select> 却漏掉 multiple，或者拼错成 mutiple；也有人误写 multiple="true"，但它是布尔属性，只认有无，不认值——<select multiple></select> 才是标准写法。
- 用户操作方式：Windows/Linux 按
Ctrl+ 点击，macOS 按Cmd+ 点击；也可拖拽框选或Shift连选 - 没设
size时，多数浏览器默认只显示 1 行（带滚动箭头），外观和单选几乎一样，极易被忽略为“只能选一个” - 建议显式设置
size="4"或更大，让用户一眼看出可多选、且能直接看到部分选项
JS 怎么安全读取所有选中的值
select.value 在多选时完全不可靠——它只返回第一个选中项的 value 字符串，其余全丢。必须用 select.selectedOptions。
这个集合天然只包含当前被选中的 <option></option> 元素，无需遍历判断 .selected 状态，也不受动态增删 option 影响。
- 推荐写法：
Array.from(select.selectedOptions).map(opt => opt.value)，得到干净的字符串数组 - 兼容 IE11 的 fallback：用
for循环遍历select.options，逐个检查option.selected - 别用
FormData.append()直接塞整个select，老浏览器可能只传第一个值；显式传数组更稳妥
为什么 iOS Safari 上 <select multiple></select> 基本失效
iOS 系统级限制导致 Safari 会彻底忽略 multiple 属性，点开后弹出的是原生单选 Picker，连多选 UI 都没有。这不是 bug，是设计如此，从 iOS 15.4 起才在极少数场景下有实验性支持，但真机测试仍不稳定。
- Android 表现也不统一：Chrome 可能支持长按多选，但无视觉反馈；部分国产浏览器直接降级为单选
- 如果页面需在手机端稳定支持多选，必须放弃原生
<select multiple></select>，改用<div> + <code><input type="checkbox">模拟的下拉组件 - 桌面端管理后台等可控环境可用原生方案，但得加提示语，比如在控件旁写“PC 端按 Ctrl/Cmd 多选”
- 试图用
select { height: 200px; }强制高度，可能被浏览器忽略或引发布局错乱 - 移动端更不用提——系统 Picker 完全接管样式，CSS 无效
- 复杂需求（如搜索过滤、分组折叠、键盘导航）必须走 JS 自定义方案，原生只适合最简单、最低维护成本的场景
<select multiple></select> 的样式为什么几乎没法改
原生 select 在加了 multiple 后，appearance: none 基本失效，CSS 对滚动条、选项高亮、复选标记、字体颜色等控制力极弱。你无法给每个 option 加背景色，也不能用 :checked（因为 option 不是表单控件元素）。
真正难的不是写对 multiple，而是判断什么时候该果断放弃它：当项目需要跨平台一致体验、定制化交互或无障碍支持时，原生方案的坑远比代码量多。
