必须显式写multiple属性才生效,仅两种合法写法:<select multiple>或<select multiple="multiple">;其他如multiple="true"均失效;无该属性时即使设size或JS赋值也仅单选。

必须显式写 multiple 属性,否则永远只能单选。 这不是可选项,是硬性前提——没它,按住 Ctrl/Cmd 点击也只会切换当前项,其余选项自动取消。
怎么写才真正生效
只认两种写法:<select multiple>(推荐)或 <select multiple="multiple">(XHTML 兼容)。其他形式都会失效:
-
multiple="true"、multiple="1"、multiple=""(无引号值):部分浏览器直接忽略 -
<select>标签里漏掉该属性:哪怕加了size="10"或 JS 设置select.multiple = true,也不触发多选行为 - 拼错成
mutiple或multible:属性名不存在,等于没写
为什么用户点来点去还是只能选一个
常见原因不是代码错,而是交互提示和视觉反馈缺失:
- 没设
size属性 → 浏览器默认只显示 1 行,带滚动箭头,看起来和单选下拉一模一样,用户根本不知道能多选 - 没在页面上说明操作方式 → Windows 用户不知道要按 Ctrl,Mac 用户不知道要按 Cmd,更没人会自发尝试 Shift 连选或拖拽框选
- iOS Safari 完全无视
multiple→ 点开就是原生单选弹窗,连 Ctrl/Cmd 都没地方按;这不是 bug,是系统级限制,从 iOS 15.4 起仍不稳定
JS 怎么安全读取所有选中的值
select.value 在多选时完全不可靠,它只返回第一个选中项的 value 字符串,其余全丢。正确路径是:
- 现代浏览器:用
select.selectedOptions—— 返回只含已选<option>的集合,转数组后取值:Array.from(select.selectedOptions).map(opt => opt.value) - 需兼容 IE11:遍历
select.options,逐个检查option.selected状态 - 别用
FormData.append('name', select)直接塞整个元素 —— 老浏览器可能只提交第一个值;显式传数组更稳妥:formData.append('name', value)循环调用
最易被忽略的一点:你写了 <select multiple size="5">,桌面端看着正常,但真机 iOS 上点开仍是单选弹窗——这不是你代码的问题,是平台不支持。需要稳定多选交互时,得换方案,比如复选框组或自定义下拉组件。

















