html下拉列表支持多选的核心是添加multiple布尔属性；否则即使按ctrl/cmd也仅单选；原生取值需用selectedoptions而非value；移动端兼容性差，ios直接忽略multiple；需注意size设置、可访问性及表单提交格式。
html 下拉列表默认不支持多选，必须显式加 multiple 属性，且用户需配合 ctrl（windows）或 cmd（macos）点击，否则只生效单选逻辑。
怎么让 <select></select> 支持多选
核心就一条：给 <select></select> 标签加上 multiple 布尔属性。没有这个属性，哪怕按住 Ctrl 点击也只会切换当前选中项，不会累积。
实操建议：
-
multiple是布尔属性，写成multiple="multiple"或multiple=""都行，但推荐简写为multiple - 加了之后，浏览器会自动把下拉框渲染成滚动列表（高度变高），不再弹出下拉菜单
- 如果想保持下拉样式但又需要多选，
<select multiple></select>不满足需求——得换第三方库或用<div> 模拟 <h3> <code><select multiple></select>的值怎么获取原生 JS 读取时，
select.value只返回第一个选中项的value，不是全部。必须遍历select.selectedOptions或检查每个option.selected。常见错误现象：提交表单后后台只收到一个值，以为是后端问题，其实是前端没正确取值。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 用
Array.from(select.selectedOptions).map(opt => opt.value)拿所有选中值 - 表单提交时，
<select multiple name="tags"></select>会自动发送多个同名字段（如tags=1&tags=3&tags=5），后端需按数组/列表接收 - 若用 AJAX 提交，别直接传
select.value，它不可靠
移动端多选体验差，怎么办
安卓 Chrome、iOS Safari 对
<select multiple></select>支持极弱：iOS 直接忽略multiple，强制单选；部分安卓机型点开后无法多选或无视觉反馈。使用场景判断：如果你的用户有显著移动端占比，不要依赖原生
multiple。实操建议：
- 移动端优先项目，改用带搜索/复选框的 JS 组件，比如
Choices.js或tom-select - 若必须用原生，至少加降级提示：
<select multiple></select>外层包个<div class="hint">PC 端按 Ctrl/Cmd 多选</div> - 别在 iOS 上测试“是否生效”，它根本不会触发多选逻辑
样式和可访问性容易被忽略的点
加了
multiple后，<select></select>默认高度由size属性控制（如size="4"显示 4 行），不设的话多数浏览器默认显示 2 行——太小，用户看不到所有选项。性能影响不大，但兼容性和语义正确性很关键：屏幕阅读器能识别
multiple并提示“多选列表”，但若你用 div 模拟却没加aria-multiselectable，就破坏了可访问性。实操建议：
- 显式设置
size，比如<select multiple size="5"></select>，避免默认过小 - 别用 CSS 的
height强制撑高<select multiple></select>，会导致滚动异常或选项截断 - 如果用自定义组件替代，必须补全
aria-属性，否则视障用户无法操作
多选下拉看着简单，但跨平台行为不一致、取值逻辑反直觉、移动端基本不可用——这些地方一旦漏掉，上线后就是真实 bug，不是“看起来差不多”。
- 用
