开启多选需用布尔属性multiple，即<select multiple>；JS获取值须用selectedOptions而非value；移动端Safari支持差；样式几乎不可定制；复杂需求应改用自定义方案。
HTML select 标签怎么开启多选？
加 multiple 属性就行，但必须是布尔属性——不写值，也不能写 multiple="true" 或 multiple="1"，否则部分浏览器可能忽略或行为异常。
-
<select multiple>是唯一合法写法；<select multiple="multiple">虽然 HTML5 允许，但冗余且易混淆，不推荐 - 没有
size属性时，多数浏览器默认只显示一行（带滚动），用户得按住 Ctrl/Cmd 才能多选；加上size="4"会直接显示 4 行选项，更直观 - 移动端 Safari 对
multiple支持有限——点开后仍常以单选弹窗形式呈现，实际无法多选，别依赖它做核心功能
获取和提交多选 select 的值要注意什么？
JS 里不能用 .value 直接读取多个选项——它只返回第一个被选中的值（或空字符串）。必须遍历 options 或用 selectedOptions。
- 推荐方式：
Array.from(select.selectedOptions).map(opt => opt.value)，简洁且兼容现代浏览器 - 兼容老浏览器（如 IE11）：用
for循环检查每个option.selected - 表单提交时，同名
select[multiple]会生成多个同名参数，如fruit=apple&fruit=banana；后端需按数组/列表接收，不是单个字符串
样式和交互上哪些坑容易踩？
multiple 下拉框的样式控制能力极弱，原生 select 几乎无法定制滚动条、选项高亮、复选框等视觉效果。
- CSS 里
appearance: none对multiple基本无效，别白费劲 - 不能用
:checked伪类选中选项，因为option不是表单控件元素，没这个状态 - 键盘操作逻辑固定：空格键切换当前聚焦项，Ctrl+方向键移动焦点，但用户普遍不知道——别把它当主力交互方式
什么时候该放弃原生 multiple，改用其他方案？
当需要搜索、分组、全选/反选按钮、响应式适配，或明确要求移动端可用时，原生 <select multiple> 就该让位了。
立即学习“前端免费学习笔记（深入）”；
- 轻量替代：用
<div>+<input type="checkbox">模拟，完全可控，无障碍支持也好 - 复杂场景：用
React-Select、Choices.js等库，它们内部根本不渲染select，而是接管 DOM - 注意：所有自定义方案都要手动处理表单序列化、禁用状态同步、键盘导航和屏幕阅读器标注，这些细节比想象中麻烦
