原生select加multiple属性可实现多选，但必须显式书写且不能赋值；需配合size属性提升可见性；取值须用selectedOptions而非value；iOS Safari基本不支持，应改用自定义组件。
原生 select 标签加 multiple 属性就能实现多选，但直接写 <select multiple> 往往达不到预期效果——用户点不中、选不了多个、移动端完全失效，问题几乎都出在细节遗漏上。
必须加 multiple 且不能写成 multiple="true"
这是硬性前提，浏览器只认布尔属性是否存在，不认值。写成 multiple="false" 或 mutiple（拼错）都会导致多选逻辑被忽略。常见错误是开发者以为“加了属性就行”，结果测试时发现按住 Ctrl/Cmd 还是只能切换单个选项——八成是漏了这个属性，或拼写错误。
-
<select multiple>✅ 正确 -
<select multiple="true">❌ 多余且无效 -
<select mutiple>❌ 拼写错误，属性名不存在 - 没写
multiple却指望用户多选 → 浏览器根本不响应多选操作
为什么加了 multiple 却只显示一行、看不出能多选？
原生 select[multiple] 默认渲染为滚动列表，多数浏览器（Chrome/Firefox）默认只显示约 4 行高度，若不设 size，它可能只显示 1 行带滚动条，视觉上和单选框几乎一样，用户根本意识不到可多选。
- 务必显式设置
size，比如size="4"或size="6"，让用户一眼看到多个选项并感知交互意图 -
size="1"会退化为单行，multiple仍生效但体验极差，等同于隐藏功能 - 不要依赖 CSS 的
height或max-height强制撑高——不同浏览器解析不一致，size是唯一可靠方式
JS 获取选中值必须用 selectedOptions，别碰 value
select.value 在多选场景下永远只返回第一个选中项的 value 字符串，其余全部丢失。这是最常被踩的坑，尤其从单选逻辑直接迁移到多选时容易忽略。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
Array.from(select.selectedOptions).map(opt => opt.value) -
select.selectedOptions返回的是实时 HTMLCollection，不是数组，需先转再操作 - 兼容 IE11 可用回退：
for (let i = 0; i - 如果
<option>没设value，取的是opt.textContent，注意空格和换行
iOS Safari 上 select[multiple] 基本不可用
这不是 bug，是 iOS 系统级限制：Safari 会彻底忽略 multiple 属性，点击后弹出全屏单选 Picker，已选项无勾选标记，也无法取消选择。Android Chrome 虽支持长按多选，但触控目标小、无视觉反馈，极易误操作。
- 纯移动端项目，必须放弃原生方案，改用
<div>+<input type="checkbox">模拟的下拉组件 - 桌面端管理后台等可控环境可用，但建议在 UI 旁加轻量提示，例如：
<small>按住 Ctrl/Cmd 多选</small> - 即使加了
aria-multiselectable，也无法绕过 iOS 的原生降级行为
真正麻烦的不是写法，而是跨平台一致性——你写的 <select multiple size="4"> 在 macOS Chrome 里好用，在 Windows Edge 里稳定，但在 iPhone 上连入口都进不去。生产环境若需覆盖全端，得提前规划自定义组件方案，别等到测试阶段才发现 iOS 用户卡在表单第一步。
