要让select支持多选，必须添加multiple布尔属性，不可写multiple="true"；加此属性后默认显示为多行滚动框，value仅返回首个选中值，需用selectedoptions获取全部选中项的value数组。
如何让 select 支持多选：必须加 multiple 属性
不加 multiple，哪怕按住 Ctrl 或 Cmd 也选不了多个——这是最常被忽略的硬性条件。浏览器只认这个布尔属性，没有值、不能写 multiple="true"，写成 multiple="" 或 multiple 都可以，但推荐直接写 multiple。
注意：加了 multiple 后，select 默认显示为多行滚动框（高度约 4 行），不再是单行下拉样式。如果想保持下拉形态，得用 JS + 自定义组件，原生 select 不支持“下拉式多选”。
-
value属性对多选无效——提交时实际发送的是所有被选中option的value值（用逗号分隔或作为数组） - 用户需配合键盘操作：Windows/Linux 按 Ctrl + 点击，macOS 按 Cmd + 点击；Shift + 点击可选中区间
- 移动端 Safari/Chrome 中，多选体验差：通常只能逐个长按勾选，且无视觉反馈，慎用于纯移动端场景
select 多选时如何获取选中的值（JavaScript）
原生 select 的 value 只返回第一个选中项，必须遍历 options 或用 selectedOptions。
推荐用 selectedOptions（IE10+ 支持）：
const select = document.querySelector('select[multiple]');
const values = Array.from(select.selectedOptions).map(opt => opt.value);
兼容旧版 IE 可用 options + 循环：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const values = []; for (let i = 0; i
- 别用
select.value，它永远只取第一个 -
select.selectedOptions返回的是HTMLCollection，需转Array才能用map、filter - 如果 option 没设
value，则取其文本内容（textContent）作为值
表单提交时多选数据怎么传？后端收到什么？
取决于提交方式：GET 会拼在 URL 里，POST 以表单字段形式发送。关键是：同名字段会被当作数组处理。
例如 <select name="tag" multiple></select> 选了 js 和 css：
- GET 提交 → URL 变成
?tag=js&tag=css - POST（
application/x-www-form-urlencoded）→ 字段是tag=js&tag=css - 后端框架（如 Express、Django、Spring）一般自动聚合成数组：
req.body.tag === ['js', 'css'] - PHP 默认只收最后一个，需命名成
name="tag[]"才能得数组
注意：如果后端没正确解析多值字段，可能只拿到最后一个值——这不是前端问题，是后端配置或框架默认行为。
为什么有时候多选失效？常见陷阱
不是代码写错，而是环境或交互细节卡住了。
- 在 iOS Safari 中，
multipleselect会触发全屏选择器，且不支持 Ctrl/Cmd 多选，用户只能单选 —— 这是系统限制，无法绕过 - 给
select设了size属性（如size="1"）会强制显示为单行，但依然支持多选，只是 UI 违反直觉，容易误操作 - 用 JS 动态设置
option.selected = true时，必须确保select已存在multiple属性，否则只会覆盖前一个选中项 - React/Vue 等框架中，不要直接操作 DOM 的
selected，要用受控组件 + 数组状态管理
原生多选能力有限，真要跨平台一致、带搜索、支持禁用选项、显示选中计数……还是得换 select2、Choices.js 或现代 UI 库里的多选组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
