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