multiple属性必须显式写在HTML的select标签中才生效，JS设置无效；需配合size属性（如size="4"）使多选可见；取值须用selectedOptions而非value；iOS Safari中该属性基本无效。
multiple属性必须写在HTML里，JS设置无效
浏览器只检查 multiple 属性是否存在，不解析值，也不响应动态设置。写 select.multiple = true 或 select.setAttribute('multiple', 'true') 都不会让 UI 变成多选样式，用户点开还是单选下拉框。
正确写法只有一种：<select multiple>。其他形式如 multiple="multiple" 冗余，multiple="true" 在旧版 Safari 或 IE 中直接失效。
常见踩坑点：
- 用 JS 动态插入
<select>后再 setAttribute，但 DOM 没重绘——UI 仍是单行，用户完全感知不到多选能力 - 服务端渲染时漏掉
multiple字面量（比如 ASP.NET 的Multiple="true"属性没转成 HTML 属性）
不设 size 就等于没开多选功能
<select multiple> 默认渲染为单行滚动框（高度约 22px），视觉上和单选下拉几乎一样，用户根本看不出能多选，更不会主动按 Ctrl/Cmd。
立即学习“前端免费学习笔记（深入）”；
必须显式加 size 才能暴露多选 UI：
-
size="4"是较稳妥的起点：显示 4 行选项，一眼识别为列表框 -
size值必须小于总<option>数才有滚动效果；设成size="100"会撑开布局 -
size="1"在部分浏览器中仍显示单行带箭头，但交互暗示依然薄弱 - 别指望用 CSS
height强行拉高——多数浏览器忽略，或导致文字截断、焦点错位
JS 获取选中值必须用 selectedOptions
select.value 永远只返回第一个选中项的 value 字符串，哪怕你选了 10 个——这不是 bug，是规范行为。
正确取法：
- 现代浏览器：
Array.from(select.selectedOptions).map(opt => opt.value) - 兼容 IE11：
Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value)
注意：selectedOptions 是实时集合，动态增删 <option> 后自动更新，无需手动同步状态。
iOS Safari 中 multiple 基本不可用
无论你怎么写 multiple、设多少 size、加多少提示文字，在 iOS Safari 点击时都会弹出单选式全屏选择器，且无法通过长按、双指等手势触发多选——这是 WebKit 的平台限制，不是代码缺陷。
所以：
- 不要在移动端核心流程中依赖原生
<select multiple> - 需要稳定多选体验时，改用
<input type="checkbox">组合 + CSS 折叠展开，或引入tom-select、Choices.js等库 - 若坚持用原生，至少在外层加明确提示：“按住 Ctrl/Cmd 多选”“iOS 用户请使用下方复选框”
这个限制在 iOS Safari 16.3 及更早版本尤为明显，检测方式：navigator.userAgent.includes('iPhone') && /OS [1-9]\d?_[0-3]/.test(navigator.userAgent)。
