multiple属性必须显式写在<select>标签中才生效，需配合size属性（如size="5"）提升可见性，JS取值须用selectedOptions而非value，iOS Safari基本不支持该特性。
multiple 属性让 <select> 支持多选，但默认 UI 不友好
加了 multiple 的 <select> 确实能选多个值，但浏览器原生渲染效果差异大：Chrome 和 Edge 默认显示为带滚动条的固定高度列表（通常 4 行），Firefox 更窄、更挤，Safari 在 macOS 上甚至不显示滚动条——用户根本不知道还能往下拉。这不是 bug，是规范允许的行为，但实际体验容易导致漏选。
- 必须配合
size属性显式设定可见行数，比如<select multiple size="5">，否则多数浏览器按size="4"渲染，太小 - 不能依赖鼠标拖拽连续选中（部分浏览器不支持），得按住
Ctrl（Windows/Linux）或Cmd（macOS）点选，这点要提前在 UI 旁提示 - 移动端 Safari 对
multiple支持极弱，点击直接唤起全屏选择器，且不保留已选项状态，基本不可用
获取 multiple select 的选中值要用 selectedOptions 而不是 value
value 属性对 multiple <select> 永远只返回第一个选中项的值，哪怕你选了十个也没用。真正该读的是 selectedOptions 集合，它返回一个 HTMLCollection，里面是所有 <option selected> 元素。
- 推荐写法：
Array.from(selectElement.selectedOptions).map(opt => opt.value)，转成数组后取value - 别用
selectElement.value或selectElement.options遍历判断selected——效率低且易漏 - 监听变化时用
change事件，input在多选场景下触发不稳定
样式受限严重，伪元素和 width/height 都难控制
原生 <select multiple> 几乎无法用 CSS 定制外观。::-webkit-scrollbar 可调滚动条，但 background、padding、border-radius 在不同浏览器表现不一，Firefox 甚至忽略大部分样式。
- 想统一视觉？基本得放弃原生控件，改用 JS 实现的下拉多选组件（如 Select2、Choices.js）
- 若坚持用原生，至少加
width: 100%和min-height防止内容撑破容器 -
appearance: none在部分浏览器下会让多选框完全失效，慎用
表单提交时 name 后自动加 [] 是后端约定，不是 HTML 标准
HTML 规范没规定多选提交格式，但主流服务器框架（PHP、Laravel、Django）默认把 <select name="tag"> 的多个值解析成数组，前提是请求体里字段名是 tag[]。这靠的是浏览器行为：当 <select multiple> 提交时，如果 name 不含 []，多数浏览器只发最后一个选中项；加上 [] 才发全部。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<select name="tag[]" multiple>—— 注意[]是写在 HTML 的name属性里的 - 如果不加
[]，后端收到的永远是字符串，不是数组，哪怕你前端 JS 取到了多个值 - React/Vue 等框架绑定时，
name是否带[]仍影响原生表单提交逻辑，别以为用 JS 提交就不用管
<select multiple> 的坑不在功能缺失，而在行为隐晦——UI 不提示可多选、JS 读值方式反直觉、样式不可控、提交格式依赖命名约定。这些细节不提前踩一遍，上线后用户说“选不了多个”，你得先确认他有没有按 Ctrl。 
