select的multiple属性有什么用：HTML下拉框多选功能全解析

multiple属性是原生HTML实现多选下拉框的唯一标准方式；其失效主因是UI表现误解——默认渲染为列表框，设size=1虽显下拉状但仍需Ctrl/Cmd键多选，且未提示导致用户不知操作方式。

multiple 属性让 <select> 元素支持用户一次选中多个 <option>，这是原生 HTML 实现多选下拉框的唯一标准方式。

为什么加了 multiple 却不能多选？

常见原因不是属性没写对，而是 UI 表现被忽略：

• <select multiple> 默认会渲染成「列表框」（高度自动撑开显示多行），不是下拉式；若设了 size 但值为 1，视觉上像下拉框，但实际仍支持 Ctrl/Cmd 多选 —— 用户根本不知道可以按住键点
• 没加 multiple 属性时，哪怕 JS 模拟勾选、或后端接收数组，浏览器也只提交最后一个选中的 value
• ASP.NET Web Forms 中的 HtmlSelect.Multiple 属性必须显式设为 true，否则即使 HTML 里写了 multiple，服务端控件也可能忽略多选状态

multiple 在不同环境下的写法差异

看似简单，但跨平台/框架时容易漏掉细节：

• 纯 HTML：可简写为 <select multiple>（布尔属性，有即真）；XHTML 要求写全 <select multiple="multiple">
• ASP.NET Web Forms：HtmlSelect.Multiple = true 必须在服务端代码中设置，仅改前端 HTML 不影响 SelectedIndex 或 SelectedValues 的行为
• React/Vue 等框架：直接绑定 multiple 属性即可，但 value 需用数组（如 value={selectedIds}），且 <option> 的 value 必须是字符串或可序列化类型

用户操作习惯和兼容性注意点

别假设用户知道怎么多选：

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

• Windows 下需按住 Ctrl 键，Mac 下是 Command 键 —— 没提示的话，90% 的人只会点一次就停
• 移动端 Safari / Chrome 对 multiple 支持有限，部分机型点击后只弹单选 Picker；真正要多选体验，得用第三方组件（如 Select2、Choices.js）或改用复选框组
• <select multiple> 提交的表单数据是同名参数多个值（name=foo&name=bar），后端接收时必须按数组处理，不是字符串拼接

最常被忽略的一点：没有 multiple 的 <select>，哪怕用 JS 给多个 <option> 加 selected 属性，表单提交时也只发最后一个。是否多选，完全由这个属性控制，不是样式或脚本能绕过的。