利用HTML Select multiple属性构建多选交互模型

这个原生多选组件，默认需要按住 Ctrl（Mac 上为 ）或 Shift 才能连续选中，这与大部分用户“点一下就选中，再点就取消”的直觉完全相反。如果希望点击即切换、无需任何修饰键，就必须依靠 JavaScript 来接管行为。

如何让 真正支持多选操作

默认情况下， 仅开启多选 UI，但用户必须配合修饰键才能操作，这与现代交互预期差距较大。要实现“类复选框”行为，关键点如下：

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

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

的 value 属性是只读的，DOM 规范明确规定它始终返回第一个选中 的 value，即使选中多项，也只返回第一个。这是标准行为，并非 bug。

• 要获取全部选中值，请使用 Array.from(select.selectedOptions).map(opt => opt.value)。
• 如果 未设置 value 属性，其值默认为 textContent，需注意空格和换行可能混入。
• 服务端接收时，后端接口必须支持数组类型（例如 name=tags[] 或 JSON body），否则只能收到单个字符串。

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

iOS Safari 对原生 的支持存在明显问题：点击后弹出一个单选式全屏选择器，连已选项状态都无法显示，用户难以确认多选结果。

• 在 iOS 上，multiple 实际不可用。建议检测 navigator.userAgent.includes('iPhone') 或使用 @supports (-webkit-appearance: none) 进行降级处理。
• 推荐方案：使用
  配合 模拟，并添加 ARIA 属性（aria-selected、aria-multiselectable）确保可访问性。
• 如果必须使用原生 select，至少添加 size="5" 使选项立即可见，避免纯下拉触发 Safari 的错误弹窗。

提交表单时，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 行为和后端参数命名约定，前者可能导致线上用户投诉“点不动”，后者则使后端无法收到完整数组。不要依赖浏览器自动处理这些问题。