真正支持多选需同时满足：添加multiple属性、用户按ctrl/cmd键点击或shift连续选择、设置size属性提升可见性；移动端不支持，须用自定义组件替代。
怎样让 <select></select> 真正支持多选
直接加 multiple 属性是必要条件，但不是充分条件——用户必须用 Ctrl（Windows/Linux）或 Cmd（macOS）配合点击，或者拖拽选择连续项。单纯鼠标单击只会取消其他选项、只保留当前项。
常见错误现象：<select multiple></select> 渲染出来高度没变，默认只显示一行，导致用户根本看不到“可以多选”的提示，甚至以为失效。
- 必须设置
size属性（如size="4"），让下拉框至少显示 4 行选项，否则浏览器按单行渲染，multiple形同虚设 - 移动端不支持
multiple的原生交互（iOS Safari 会降级为单选弹窗），别依赖它做核心多选流程 - 若想保持下拉箭头 + 多选体验，得用 JS 库（如 Select2、Choices.js）或自研下拉面板，原生
<select multiple></select>没有展开/收起状态
multiple 下的值怎么获取和提交
表单提交时，<select multiple></select> 会以同名字段发送多个值（如 name="tag" → tag=1&tag=3&tag=5），后端需按数组接收，不是字符串拼接。
JS 获取选中值时，selectElement.value 只返回第一个选中项（不符合直觉！），必须遍历 options 或用 selectedOptions。
- 推荐写法：
Array.from(select.selectedOptions).map(opt => opt.value) - 兼容旧浏览器（IE11）用：
Array.prototype.filter.call(select.options, opt => opt.selected).map(opt => opt.value) - 提交前校验是否至少选了一项？检查
select.selectedOptions.length === 0，别用!select.value
样式受限？multiple 下的 CSS 能做什么
原生 <select multiple></select> 的样式控制能力极弱：无法改滚动条颜色、无法隐藏默认箭头、无法调整选项 hover 效果。Chrome 和 Firefox 对 <option></option> 的 CSS 支持几乎为零（background-color 在部分 Chrome 版本有效，但不稳定）。
- 能安全设置的：容器宽高、字体、
border、padding、background（整个 select 区域） - 不能依赖的：
::after伪元素（无效）、option:hover（不触发）、appearance: none（对 multiple 无效） - 如果设计要求高亮选中项背景色或图标，只能放弃原生控件，用
<div> + <code><input type="checkbox">模拟为什么有时候
multiple像没生效最常被忽略的是事件监听方式——用
change事件没问题，但若监听click或input，在某些浏览器（尤其是 Safari）里可能不触发，或只触发一次。- 必须监听
change，且确保绑定在<select></select>元素本身，不要委托到父级（选项点击不冒泡出 select） - 动态添加
multiple属性？用select.multiple = true，别只改setAttribute('multiple', '')（部分老版本 Edge 不识别） - React/Vue 中，
multiple必须作为布尔属性存在（:multiple="true"），不能写成:multiple="isMultiple"后再设 false——移除属性才会真正关闭多选
<select multiple></select>的边界非常清晰：适合后台管理页、内部工具等对交互一致性要求不高、且接受键盘操作习惯的场景。一旦涉及移动端、视觉定制或复杂交互逻辑，就得换方案——这点容易低估，直到 QA 提出“iPhone 上点不了多选”才返工。 - 必须监听
