HTML <select> 加 multiple 属性即可多选，但默认渲染为垂直列表而非下拉，需设 size 提升可发现性；JS 必用 selectedOptions 获取全部值，iOS Safari 基本不支持，应改用自定义组件。
HTML <select> 标签加 multiple 属性就能多选，但默认 UI 反直觉
直接在 <select> 上加 multiple 属性是标准做法，但浏览器默认渲染为垂直列表（而非下拉），用户容易误以为“点不开”。这不是 bug，而是规范行为：multiple 的语义就是“同时展示多个选项”，所以不折叠。
常见错误现象：加了 multiple 却仍想点开下拉、按住 Ctrl/Cmd 也无反应——大概率漏了 name 属性或表单提交时没处理数组值。
-
<select multiple name="tags">必须带name，否则 POST/GET 不会传值 - 后端接收时，
tags是字符串数组（如 Python 的request.form.getlist('tags')，PHP 的$_POST['tags']是 array） - 用 JS 获取选中项：用
selectElement.selectedOptions，别遍历options手动判断selected
用 CSS + JS 模拟“下拉式多选”要绕过原生限制
真要实现点击展开、勾选、再收起的体验，不能只靠 multiple。得用自定义组件，核心思路是隐藏原生 <select multiple>，用 <div> + <input type="checkbox"> 模拟 UI，再同步状态到隐藏 select 或直接读取 checkbox 状态。
性能影响小，但要注意焦点管理和键盘操作（空格/Enter 切换、Tab 导航）——多数人忽略这点，导致残障用户无法操作。
- 必须给模拟下拉容器加
role="listbox"，每个选项加role="option"和aria-selected - 用
tabindex="0"让容器可聚焦，监听keydown处理方向键和空格 - 别用
display: none隐藏原生<select>，改用position: absolute; left: -9999px，否则部分屏幕阅读器会跳过
React/Vue 中用现成库更稳，但要注意受控模式陷阱
像 react-select 或 vue-multiselect 默认是受控组件，即 value 必须由 state 驱动。常见错误是只传 value 却没配 onChange，导致选项点不动。
Vue 用户尤其注意：v-model 绑定的数组必须是响应式新引用，不要直接 push/splice 原数组，否则视图不更新。
- React 示例：确保
value是数组，onChange接收新数组（不是 event 对象） - Vue 示例：用
ref或computed包裹数组，避免直接修改原始数据 - 所有库都依赖
key稳定性；选项对象若用随机 id 或 index 当 key，多选后排序/过滤易出错
移动端 Safari 对 multiple 支持差，iOS 用户实际体验接近单选
iOS 系统级 <select multiple> 在 Safari 中基本不可用：点击后只弹出单选 Picker，且不支持长按多选。这不是样式问题，是 WebKit 限制。
这意味着，只要目标用户含 iOS 设备，就必须用自定义下拉方案——哪怕只是简单替换为 checkbox 列表，也比依赖原生 multiple 更可靠。
- 检测方式：用
navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad') - 临时降级策略：iOS 下自动切换为“标签式多选”（每个选项是带删除 × 的 badge）
- 别指望
appearance: none能修复 iOS 的multiple行为，它根本不触发
querySelector('select').value ——这个只返回第一个选中项，永远拿不到多选结果。 
