HTML select 多选必须添加 multiple 属性，否则即使按 Ctrl/Cmd 也仅单选；获取多选值须用 selectedOptions 而非 value；表单提交需 name 加 [] 后缀，否则后端仅收最后一个值。
HTML select 多选必须加 multiple 属性
不加 multiple，哪怕按住 Ctrl 或 Cmd 点击，也只会单选。浏览器根本不识别多选意图——这是最常被忽略的硬性前提。
实操建议：
-
<select multiple>是唯一启用多选的方式，size属性只是控制显示行数（比如size="4"显示 4 行），和是否多选无关 - 如果只写
<select multiple="">或<select multiple="multiple">，效果完全一样；布尔属性有就生效，值是什么不重要 - 移动端 Safari 对
multiple支持有限，部分机型会降级为单选弹窗，不能依赖原生体验
获取多个选中值要用 selectedOptions 或遍历 options
很多人习惯用 select.value，但它永远只返回第一个选中项的 value（没选中则为空字符串），根本拿不到全部。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
select.selectedOptions—— 返回HTMLCollection，可直接转数组：[...select.selectedOptions].map(opt => opt.value) - 兼容老浏览器（IE10+）可用循环：
Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value) - 别用
select.value或select.selectedIndex，它们只服务单选场景
提交表单时 name 后要加 [] 才能传多个值
后端（如 PHP、Node.js 的 body-parser、Django）默认把同名字段当单值处理。不加方括号，后端只能收到最后一个选中的值。
关键细节：
- HTML 中写
<select name="tag[]" multiple>，不是name="tag" - PHP 自动解析为数组
$_POST['tag']；Express 需配extended: true的urlencoded中间件；Django 要用request.POST.getlist('tag') - 用 JS 提交时，如果手动构造 FormData，也要确保每个值单独 append：
formData.append('tag[]', 'a'); formData.append('tag[]', 'b');
样式和交互限制多，原生 <select multiple> 很难定制
浏览器对 <select multiple> 的 CSS 控制力极弱：无法改下拉箭头、无法自定义选项高亮色、iOS 上连 height 都不响应。
实际项目中常见应对方式：
- 用
<div>+<input type="checkbox">模拟，完全可控，但需自己管理状态和键盘导航（如空格选中、上下键移动） - 用
size设为大于 1（如size="5"）让选项常显，比下拉式稍好控制，但仍受限 - 第三方库（如 Select2、Choices.js）本质也是隐藏原生
select，用 DOM 重绘，要注意它们对multiple的初始化逻辑是否匹配你的数据格式
原生多选 select 的边界很清晰：适合后台管理页、内部工具等对样式无要求的场景；一旦需要搜索、分组、远程加载，就得换方案。
