multiple属性合法写法仅两种:或;其他形式如multiple="true"等会导致失效;需配合size属性使多选可见,但ios safari仍限制为单选弹窗。

multiple 属性的合法写法只有两种
浏览器只认 multiple 这个属性是否存在,不解析它的值。写错形式会导致多选直接失效,尤其在旧版 Safari 或 IE 中。
必须用以下任一写法:
-
<select multiple></select>—— 推荐,HTML5 标准写法,简洁可靠 -
<select multiple></select>—— XHTML 兼容写法,虽冗余但合法
千万别写这些:
-
multiple="true"、multiple="1"、multiple="on":部分浏览器会忽略 -
multiple=(省略引号和值):XHTML 不允许,某些解析器报错
没设 size 时,用户根本不知道能多选
<select multiple></select> 默认只显示一行(带滚动条),视觉上和单选下拉无异。用户不会主动去按 Ctrl/Cmd 键,体验断层。
加 size 才能让多选能力“可见”:
-
size="4":显示 4 行选项,用户一眼看出是列表框,可多选 -
size值必须小于总<option></option>数才生效;设成size="100"会撑开布局,慎用 - 移动端(尤其是 iOS Safari)基本无视
size和multiple,点开仍是单选弹窗——别把它当核心交互依赖
JavaScript 动态启用 multiple 要注意 DOM 同步
用 JS 设置 select.multiple = true 是可行的,但得确保它反映到实际 DOM 上:
- 设置后建议再调用
select.setAttribute('multiple', ''),避免某些老浏览器渲染不一致 - 如果页面已有 JS 框架或初始化脚本覆盖了
<select></select>属性,手动改.multiple可能被后续逻辑重置 - 取值时别只读
select.value—— 它永远只返回第一个选中项;要用Array.from(select.selectedOptions).map(o => o.value)或遍历select.options
ASP.NET Web Forms 中 HtmlSelect.Multiple 的坑
服务端 HtmlSelect.Multiple = true 只控制最终输出的 HTML 是否含 multiple 属性,不是独立开关:
- 若前端 JS 清除了该属性(比如重写
innerHTML),服务端设置就白做了 - 回发(postback)后,
SelectedIndices或循环Items[i].Selected才能拿到全部选中项;Value仍只返回首个 - 别在
Page_Load里无条件清空并重建Items,否则用户刚选的多选项会被抹掉
最易被忽略的一点:你写了 <select multiple size="5"></select>,iOS 上点开还是单选弹窗,且无法 Ctrl/Cmd 多选——这不是 bug,是平台限制。需要多选交互时,优先考虑复选框组或自定义下拉组件。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











