HTML多选框组靠结构、属性和语义实现数据采集，需正确设置multiple布尔属性、合理命名name、用selectedOptions读取值，并在移动端改用自定义方案。
HTML 中的多选框组（即 <select multiple>）不是靠“绑定”实现的，而是靠结构、属性和语义配合完成数据采集。所谓“绑定规范”，实际是指如何正确书写 HTML 结构、设置关键属性、配合表单提交与脚本读取，确保多选值能被后端或 JS 正确识别和处理。
必须加 multiple 属性，且写法要标准
multiple 是布尔属性，只认“有无”，不认值：
- ✅ 正确：
<select name="tags" multiple> - ❌ 错误：
<select name="tags" multiple="true">或<select name="tags" multiple="1"> - ❌ 拼写错误：
mutiple、mulitple等均无效
name 属性建议用复数或带方括号的命名
这是为了让服务端（如 PHP、Node.js、Python Flask/Django）自然接收为数组：
- 推荐：
name="hobbies[]"（PHP 风格）、name="skills"（RESTful/通用风格） - 避免：
name="hobby"—— 容易被后端只取第一个值 - 表单提交时，浏览器会把多个选中项拼成类似
skills=reading&skills=coding&skills=gaming的查询字符串，多数后端框架能自动转为数组
JS 读取必须用 selectedOptions，不能用 value
select.value 在多选时永远只返回第一个选中项的 value，其余丢失：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐方式：
Array.from(select.selectedOptions).map(opt => opt.value) - ✅ 兼容 IE11：
Array.prototype.filter.call(select.options, opt => opt.selected).map(opt => opt.value) - ❌ 危险写法：
select.value或select.getAttribute('value')
移动端需规避原生 multiple，改用自定义方案
iOS Safari 完全忽略 multiple 属性，Android 各厂商浏览器支持也不一致：
- 桌面端管理后台等可控环境可放心使用原生
<select multiple> - 面向公众的响应式网站或 App 内嵌页，应改用
<div>+<input type="checkbox">模拟的下拉多选组件 - 若坚持用原生，至少加提示文字，例如：
<label>兴趣爱好（PC 端按 Ctrl/Cmd 多选）</label>
