必须显式写<select multiple>才生效，需设size提升可见性，JS须用selectedOptions取值，iOS Safari因平台限制基本不支持，应改用自定义组件。
select 加 multiple 属性确实能让下拉框多选，但直接写上就完事？不行——多数人卡在“写了却没反应”“点了只选一个”“手机上根本不能用”这三步上。
multiple 属性必须显式写在 HTML 里才生效
浏览器只检测 multiple 这个属性是否存在，不解析它的值，也不响应 JS 动态设置。
-
<select multiple>✅ 唯一推荐写法，简洁、标准、兼容性好 -
<select multiple="true">❌ Safari 旧版本、IE 可能直接忽略 -
<select multiple="">❌ XHTML 不允许空属性值，部分解析器报错 -
selectElement.multiple = true❌ 不触发渲染变化，只是 JS 属性赋值
漏写、拼错（比如写成 mutiple）、或靠 JS 补上，都会导致多选失效。
不设 size 属性，用户根本看不出能多选
默认情况下 <select multiple> 渲染为单行滚动框（高度约 22px），和单选下拉外观几乎一样，连箭头都还在，用户点开只会以为是普通下拉。
立即学习“前端免费学习笔记（深入）”；
-
size="4"是较稳妥的起点：显示 4 行选项，视觉上明确是列表框 -
size值必须小于总<option>数才有滚动效果；设成size="100"会撑开布局 -
size="1"在部分浏览器中仍显示单行带滚动箭头，但行为是多选——交互暗示严重不足
别指望用户自己发现要按 Ctrl/Cmd —— 先让界面“看起来就能多选”，才是真实可用的前提。
JS 获取值必须用 selectedOptions，value 完全不可靠
select.value 在多选时永远只返回第一个选中项的字符串值，哪怕你选了 10 个，其余全丢。这不是 bug，是规范行为。
- 正确取法：
Array.from(select.selectedOptions).map(opt => opt.value) - IE11 不支持
selectedOptions，需 fallback：Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value) - jQuery 的
$('select :selected').val()同样只返回第一个，要用$('select :selected').map((_, o) => o.value).get() - 表单提交时，同名字段会重复发送（如
hobbies=reading&hobbies=swimming），后端必须按数组接收，不是字符串拼接
iOS Safari 上 multiple 基本无效，这不是配置问题
无论你怎么写 multiple、设多少 size、加多少提示文字，在 iOS Safari 点击时都会弹出原生单选 Picker，且无法通过长按、双指等手势触发多选——这是 WebKit 的平台限制，不是代码缺陷。
- Android 表现也不统一：Chrome 可能支持长按多选但无视觉反馈；部分国产浏览器直接降级为单选
- 如果页面需在手机端稳定支持多选，必须放弃原生
<select multiple> - 替代方案：用
<div>+<input type="checkbox">模拟下拉面板，或引入 tom-select、Choices.js 等库（它们根本不渲染select）
最容易被忽略的是：你在桌面端反复验证没问题，却忘了真机测试——而移动端恰恰是用户最常操作的场景。
