multiple属性必须显式写在html中才生效，仅通过js设置无效；默认无size时ui不显示多选能力，需设size≥2；获取选中值须用selectedoptions；ios safari中multiple基本无效，应改用复选框或专用库。
multiple属性必须显式写在HTML里才生效
浏览器只检测 multiple 属性是否存在，不解析它的值，也不响应 JS 动态设置。写 select.multiple = true 或 select.setAttribute('multiple', 'true') 都不能替代原生 HTML 属性。
正确写法只有这一种：<select multiple></select>。其他形式要么冗余（multiple="multiple"），要么在旧版 Safari 或 IE 中直接失效（multiple="true"、multiple=""）。
常见错误：用 JS 插入 <select></select> 后再 setAttribute，但没刷新 DOM 渲染——此时 UI 仍是单选样式，用户完全感知不到多选能力。
不设size就等于隐藏多选能力
默认情况下，<select multiple></select> 渲染为单行滚动框（高度约 22px），视觉上和单选下拉几乎一样，用户根本看不出能多选，更不会主动按 Ctrl/Cmd。
-
size="4"是较稳妥的起点：显示 4 行选项，一眼识别为列表框 - size 值必须小于总
<option></option>数才有滚动效果；设成size="100"会撑开布局 -
size="1"在部分浏览器中仍显示为单行带滚动箭头，但交互暗示依然薄弱
别指望加 CSS height 强行拉高——多数浏览器会忽略，或导致文字截断、焦点错位。
JS 获取选中值必须用 selectedOptions，别碰 value
select.value 永远只返回第一个选中项的 value 字符串，哪怕你选了 10 个——这不是 bug，是规范行为。
正确取法：
const values = Array.from(select.selectedOptions).map(opt => opt.value);
兼容 IE11 的回退写法：
const values = Array.from(select.options) .filter(opt => opt.selected) .map(opt => opt.value);
注意：selectedOptions 是实时集合，动态增删 <option></option> 后自动更新，无需手动同步状态。
iOS Safari 中 multiple 基本无效
无论你怎么写 multiple、设多少 size、加多少提示文字，在 iOS Safari 点击时都会弹出单选式全屏选择器，且无法通过长按、双指等手势触发多选——这是 WebKit 的平台限制，不是代码缺陷。
所以：
- 不要在移动端核心流程中依赖原生
<select multiple></select> - 需要稳定多选体验时，改用
<input type="checkbox">组合 + CSS 折叠展开，或引入tom-select、Choices.js等库 - 若坚持用原生，至少在外层加明确提示：“按住 Ctrl/Cmd 多选”“iOS 用户请使用下方复选框”
最易被忽略的一点：你反复检查了 HTML、JS、CSS，却没在真机上测过 iOS Safari —— 这个坑，90% 的人踩过两次以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
