HTML多选框启用技巧与multiple属性解析

本文深入解析了HTML中实现select多选框的三大核心要点：必须添加multiple属性才能启用多选功能（size属性仅控制显示行数，与多选无关）；获取选中值时需使用selectedOptions而非易被误用的value属性，以确保准确捕获全部选项；表单提交时name必须附加[]后缀，否则后端只能接收到最后一个选中值。同时指出原生多选select在移动端兼容性差、样式定制能力极弱等现实局限，并给出从原生优化到自定义组件、第三方库的实用选型建议——帮你避开高频坑点，快速构建可靠、可维护的多选交互。

HTML select 多选必须加 multiple 属性

不加 multiple，哪怕按住 Ctrl 或 Cmd 点击，也只会单选。浏览器根本不识别多选意图——这是最常被忽略的硬性前提。

实操建议：

• <select multiple> 是唯一启用多选的方式，size 属性只是控制显示行数（比如 size="4" 显示 4 行），和是否多选无关
• 如果只写 <select multiple=""> 或 <select multiple="multiple">，效果完全一样；布尔属性有就生效，值是什么不重要
• 移动端 Safari 对 multiple 支持有限，部分机型会降级为单选弹窗，不能依赖原生体验

获取多个选中值要用 selectedOptions 或遍历 options

很多人习惯用 select.value，但它永远只返回第一个选中项的 value（没选中则为空字符串），根本拿不到全部。

正确做法：

• 用 select.selectedOptions —— 返回 HTMLCollection，可直接转数组：[...select.selectedOptions].map(opt => opt.value)
• 兼容老浏览器（IE10+）可用循环：Array.from(select.options).filter(opt => opt.selected).map(opt => opt.value)
• 别用 select.value 或 select.selectedIndex，它们只服务单选场景

提交表单时 name 后要加 [] 才能传多个值

后端（如 PHP、Node.js 的 body-parser、Django）默认把同名字段当单值处理。不加方括号，后端只能收到最后一个选中的值。

关键细节：

• HTML 中写 <select name="tag[]" multiple>，不是 name="tag"
• PHP 自动解析为数组 $_POST['tag']；Express 需配 extended: true 的 urlencoded 中间件；Django 要用 request.POST.getlist('tag')
• 用 JS 提交时，如果手动构造 FormData，也要确保每个值单独 append：formData.append('tag[]', 'a'); formData.append('tag[]', 'b');

样式和交互限制多，原生 <select multiple> 很难定制

浏览器对 <select multiple> 的 CSS 控制力极弱：无法改下拉箭头、无法自定义选项高亮色、iOS 上连 height 都不响应。

实际项目中常见应对方式：

• 用
  + <input type="checkbox"> 模拟，完全可控，但需自己管理状态和键盘导航（如空格选中、上下键移动）
• 用 size 设为大于 1（如 size="5"）让选项常显，比下拉式稍好控制，但仍受限
• 第三方库（如 Select2、Choices.js）本质也是隐藏原生 select，用 DOM 重绘，要注意它们对 multiple 的初始化逻辑是否匹配你的数据格式

原生多选 select 的边界很清晰：适合后台管理页、内部工具等对样式无要求的场景；一旦需要搜索、分组、远程加载，就得换方案。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML多选框启用技巧与multiple属性解析》文章吧，也可关注golang学习网公众号了解相关技术文章。