是唯一可靠写法，浏览器仅检测属性存在与否；必须配合 size 属性（如 size="4"）才能使多选可见；读取值应使用 select.selectedOptions，而非 select.value。
怎样写对 multiple 属性才生效
只写 就行，其他写法基本靠不住。浏览器只检查这个属性是否存在，不解析它的值。
常见错误写法包括：multiple="true"、multiple="1"、multiple=""（XHTML 兼容但非推荐）、甚至拼错成 mutiple——这些都会导致多选逻辑被忽略，尤其在旧版 Safari 或 IE 中。
合法且推荐的写法只有两种：
-
—— HTML5 标准，简洁可靠 -
—— XHTML 兼容写法，冗余但合法
别指望加了 multiple 后还能保持“点击展开下拉”的视觉效果：它会立刻变成一个固定高度的多行列表（除非你用 CSS 强制覆盖，但大概率失效）。
为什么设了 multiple 却只能选一个
最常见原因不是代码写错，而是用户根本没意识到能多选——因为没设 size，界面看起来和单选一模一样。
默认只显示一行（带滚动条），没有视觉提示，用户不会主动按 Ctrl/Cmd 去点。必须显式加 size 才能让多选能力“可见”：
-
size="4"：显示 4 行选项，一眼看出是列表框，可多选 -
size值必须小于总数才有意义；设成size="100"会撑开布局，慎用 -
size="1"是个陷阱：部分浏览器仍按多选逻辑运行，但 UI 完全像单选，极易误导
另外两个隐形原因：
- CSS 写了
select { appearance: none; }却没补交互逻辑，原生多选行为直接被禁用 - 移动端（尤其是 iOS Safari）系统级限制，点开就是单选弹窗，
multiple和size全部被无视
JS 怎么安全读取所有选中值
select.value 在多选时完全不可信——它永远只返回第一个选中项的 value 字符串，其余全丢。这是前端最常踩的坑之一。
正确方式是用 select.selectedOptions，它是实时的 HTMLCollection，天然过滤掉未选中的项：
const select = document.querySelector('select[multiple]');
const values = Array.from(select.selectedOptions).map(opt => opt.value);
// 返回 ['coding', 'gaming'] 这样的数组
兼容 IE11 的 fallback 写法：
- 遍历
select.options，逐个判断opt.selected - 别用
FormData.append('name', select)直接塞整个元素，老浏览器可能只传第一个值
注意：selectedOptions 不受动态增删 影响，比手动遍历更稳。
移动端多选为什么总是失败
iOS Safari 从设计上就拒绝支持 ：点开后强制调用系统单选 Picker，连多选 UI 都不渲染。这不是 bug，是平台限制，2026 年最新版 iOS 仍无稳定支持。
安卓表现也不统一：
- Chrome 可能允许长按多选，但无视觉反馈，用户不知道是否成功
- 部分国产浏览器直接降级为单选，且不报任何警告
如果业务要求真正在手机端完成多选（比如表单提交、筛选操作），必须放弃原生方案。可行路径只有两条：
- 改用 +
模拟的折叠面板（带搜索、标签、清空按钮）- 引入轻量库如
Choices.js或tom-select，它们会隐藏原生select，生成跨端一致的 UI最后提醒一句：别在 iOS 上测试“
multiple是否生效”，它根本不会触发多选逻辑——这个限制本身，就是你要适配的第一件事。 - 引入轻量库如
