原生<select>加multiple属性可多选，但必须显式写<select multiple>、配合Ctrl/Cmd键操作、设置size提升可见性，且iOS Safari完全不支持，应改用自定义组件。
原生 <select> 加 multiple 属性确实能多选，但必须配合键盘操作、显式设 size，且 iOS Safari 上基本不可用——别指望它点一下就打勾。
multiple 属性怎么写才生效
只写 multiple 就够了，不要 multiple="true" 或 multiple=""。浏览器只检测属性是否存在，不读取值。
-
<select multiple>✅ 标准、简洁、全兼容 -
<select multiple="true">⚠️ 多数浏览器容错，但 Safari 旧版可能忽略 -
select.multiple = true❌ JS 动态设置无效，必须在 HTML 中声明
用户到底怎么多选？不是点一下就选
加了 multiple 后，UI 不会自动变成“带复选框的下拉”，用户必须主动配合键盘：
- Windows/Linux：按住
Ctrl+ 点击选项（逐个切换） - macOS：按住
Cmd+ 点击选项 - 连续区间：按住
Shift+ 首尾点击 - 拖拽框选：鼠标按住拖动划过多个选项（部分浏览器支持）
没提示的话，90% 用户会反复单击，以为功能坏了。建议紧挨控件加一句：按 Ctrl/Cmd 多选
立即学习“前端免费学习笔记（深入）”；
JS 怎么拿到全部选中值？value 是个坑
select.value 永远只返回第一个选中项的值，哪怕你选了十个——这不是 bug，是规范行为。
- ✅ 正确方式：
Array.from(select.selectedOptions).map(opt => opt.value) - ⚠️ IE11 不支持
selectedOptions，回退写法：Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value) - ❌
$('select').val()（jQuery）同样只返回第一个，得用$('select :selected').map((_, o) => o.value).get()
移动端和样式为什么劝你放弃原生
iOS Safari 完全无视 multiple：点击后弹出单选 Picker，无法取消、不能多选——这是 WebKit 的系统级限制，不是你代码写错了。
- Android Chrome 虽支持，但触控目标小、无视觉反馈，体验差
-
<option>几乎不响应任何 CSS（background、padding、color均无效） - 想实现标签化展示、搜索过滤、虚拟滚动？原生
<select multiple>一步都做不到
真正要跨端稳定、可定制、可访问的多选，得用 <div> + <input type="checkbox"> 自研，或引入 Choices.js、tom-select 这类不依赖原生 select 的库。
