HTML下拉列表天然支持多选的关键是添加multiple布尔属性；需配合Ctrl/Cmd点击或拖拽选择，JS取值须用selectedOptions而非value，移动端Safari兼容性差，建议设size属性提升可发现性。
HTML 的 <select> 天然支持多选，关键就一个属性：multiple —— 没有它，永远只能选一个；加了它，用户按 Ctrl（Windows）或 Cmd（macOS）点选，或拖拽框选，就能选多个。
怎么写一个基础的多选 <select>
核心就是给 <select> 标签加上 multiple 属性（布尔属性，有即生效），并可选设置 size 控制可见行数（不设时默认只显示一行，需滚动查看选项）：
<select name="hobbies" multiple size="4"> <option value="reading">阅读</option> <option value="coding">编程</option> <option value="gaming">游戏</option> <option value="cooking">做饭</option> </select>
注意：size="4" 不是必须的，但强烈建议设 —— 否则用户看不到所有选项，也看不出这是个多选框（单行 <select multiple> 界面和单选几乎一样，极易误操作）。
提交后后端怎么拿到多个值？
表单提交时，multiple 下拉框会以同名参数多次发送（如 hobbies=reading&hobbies=coding），后端框架通常自动聚合成数组：
立即学习“前端免费学习笔记（深入）”；
- PHP 中
$_POST['hobbies']是数组（需确保name有方括号如name="hobbies[]"才更稳妥） - Node.js（Express）中
req.body.hobbies默认是字符串，需用extended: true的urlencoded中间件才能解析为数组 - Python Flask 中
request.form.getlist('hobbies')是标准取法
前端 JS 获取选中值也得用 .selectedOptions（不是 .value）：
const select = document.querySelector('select[name="hobbies"]');<br>const values = Array.from(select.selectedOptions).map(opt => opt.value); // ['reading', 'coding']
为什么加了 multiple 却还是只能选一个？
常见原因有三个：
- 浏览器没识别出多选状态：检查是否漏了
multiple属性，或拼写错误（比如写成mutiple） - CSS 强制覆盖了原生行为：比如写了
select { appearance: none; }又没补交互逻辑，会导致多选失效 - 移动端体验差：iOS Safari 和部分安卓浏览器对
<select multiple>支持弱，常退化为单选弹窗；如需稳定多选，应改用自定义下拉组件（如<div>+<input type="checkbox">）
另外，<option> 的 selected 属性可以预设多个默认选中项，但仅限初始加载时有效，JS 动态设置需操作 option.selected = true。
要不要用 <datalist> 或第三方库替代？
不用。 <datalist> 是输入建议，不支持多选；而原生 <select multiple> 语义清晰、无障碍友好、无需 JS 就能工作。只有当遇到以下情况才考虑换方案：
- 需要搜索过滤选项（原生不支持）
- 必须在移动端保持一致多选体验
- 要支持“全选/反选”按钮或已选标签展示
这些功能原生做不到，硬改样式+事件容易翻车，这时候再上轻量库（如 Choices.js）更靠谱。
