html 的 标签添加 multiple 属性可启用多选,但需按 ctrl/command 键或拖拽选择;推荐写法为 multiple(布尔属性),配合 size 控制可见行数,提交时同名参数重复发送,javascript 应用 selectedoptions 获取全部值,移动端支持不佳,建议自定义组件替代。

HTML 的 <select></select> 标签加上 multiple 属性,就能让下拉列表支持多选。但要注意:**加了 multiple 后,用户必须按住 Ctrl(Windows)或 Command(Mac)再点击选项,或者用鼠标拖拽选择连续项——它不会变成“点一下就勾选”的那种复选式下拉框。**
启用 multiple 属性的基本写法
只需在 <select></select> 标签中添加 multiple 属性(布尔属性,无需赋值),浏览器就会启用多选模式:
<select multiple name="hobbies"><option value="reading">阅读</option> <option value="swimming">游泳</option> <option value="coding">编程</option></select>
注意:multiple 是纯布尔属性,写成 multiple="true" 或 multiple="" 都可以,但推荐直接写 multiple 更简洁规范。
配合 size 属性控制可见行数
默认情况下,multiple 下拉框会显示为一个“滚动列表”,高度只显示一行(需滚动查看)。为了让用户一眼看到多个选项,建议加上 size 属性指定可见行数:
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
-
size="3"表示同时显示 3 行选项(不带下拉箭头,更像列表框) -
size值小于选项总数时自动出现滚动条 - 如果希望保留传统下拉样式(带箭头+点击展开),
multiple本身不支持——那是 UI 框架(如 Select2、Chosen)或自定义组件的职责
获取和提交多选值的注意事项
表单提交时,multiple 选中的多个值会以同名参数形式发送(如 hobbies=reading&hobbies=swimming)。后端需按数组/列表方式接收。前端 JavaScript 获取方式也不同:
- 用
selectElement.selectedOptions可直接拿到所有被选中的<option></option>元素集合 - 遍历该集合,读取
.value或.text即可得到选中值 - 单独用
selectElement.value只返回第一个选中的值(兼容性考虑,不推荐)
移动端与无障碍支持要点
在手机浏览器上,multiple 表现差异较大:
- 部分 Android 浏览器仍以传统下拉方式呈现,且多选操作不便(可能需长按)
- iOS Safari 对
multiple支持有限,常降级为单选 - 屏幕阅读器能识别
multiple,但需确保每个<option></option>有明确文本,必要时用aria-label补充说明
若需跨平台一致的多选体验,建议优先考虑基于 <div> + <code><input type="checkbox"> 的自定义下拉组件。










