怎么利用 Select 标签的 Multiple 属性在 HTML 编程中构建多选状态的交互模型

<select multiple> 默认需配合 Ctrl/Shift 多选，要实现点击即切换需监听 click 事件并手动管理 selected 状态；其 value 属性只返回首个选中项，获取全部须用 selectedOptions；iOS Safari 不支持原生多选，应降级为 ARIA 模拟组件。

如何让 <select multiple> 真正支持多选操作

默认情况下，<select multiple> 只是开启多选 UI，但用户必须配合 Ctrl（macOS 是 ⌘）或 Shift 才能连续选中多个选项——这和多数现代交互预期不符。要实现点击即切换、无需修饰键的“类复选框”行为，必须靠 JavaScript 干预。

• 必须监听 click 事件（不是 change），因为 change 在失去焦点时才触发，无法实时响应单次点击
• 每次点击需手动读取 event.target.selectedOptions 或遍历 options 数组判断 selected 状态
• 注意：直接对 option.selected 赋值会触发重排，频繁操作建议批量修改后统一提交

为什么 select[multiple] 的 value 属性只返回第一个选中项

<select multiple> 的 value 属性是只读的，且规范规定它始终返回第一个 selected 的 <option> 的 value，哪怕你选了十个。这不是 bug，是 DOM 标准行为。

• 要获取全部选中值，请用 Array.from(select.selectedOptions).map(opt => opt.value)
• 如果 <option> 没设 value 属性，其值为 textContent，注意空格和换行可能混入
• 服务端接收时，确保后端接口接受数组类型（如 name=tags[] 或 JSON body），而非单个字符串

移动端 Safari 中 multiple 的兼容性陷阱

iOS Safari 对原生 <select multiple> 支持极差：点击后弹出的是单选式全屏选择器，且不显示已选项状态，用户根本无法确认多选结果。

• 在 iOS 上，multiple 实际不可用，应检测 navigator.userAgent.includes('iPhone') 或使用 @supports (-webkit-appearance: none) 做降级
• 推荐方案：用 <div role="listbox"> + <button role="option"> 模拟，配合 ARIA 属性（aria-selected、aria-multiselectable）保证可访问性
• 若坚持用原生 select，至少加 size="5" 让选项可见，避免纯下拉触发 Safari 的错误弹窗

提交表单时，multiple 选中的数据怎么被后端正确解析

浏览器提交时，<select name="colors" multiple> 会把每个选中项作为独立字段发送，例如：colors=red&colors=blue&colors=green。但不同后端框架处理方式差异极大。

立即学习“前端免费学习笔记（深入）”；

• PHP 默认将同名参数覆盖为最后一个值（$_GET['colors'] 只得 green），必须用 colors[]=red&colors[]=blue 格式，即 name="colors[]"
• Node.js 的 urlencoded 中间件（如 express.urlencoded）默认支持数组，但需设置 extended: true
• 如果走 AJAX 提交，更稳妥的做法是手动序列化：new FormData(form).getAll('colors') 或 JSON.stringify(selectedValues)

实际开发中，最常被忽略的是 iOS 行为和后端参数命名约定——前者导致线上用户投诉“点不动”，后者导致后端收不到完整数组。别指望浏览器自动帮你做对。