原生HTML多选下拉框通过实现，但默认为多行列表而非传统下拉；需用selectedOptions获取选中值；iOS Safari不支持多选；样式定制受限，移动端应改用JS模拟组件。
HTML 多选下拉框用 select 加 multiple 属性就行
不用 JS、不用第三方库，原生 HTML 就能实现多选下拉——核心就一个属性：multiple。它让 select 元素支持按住 Ctrl（Windows）或 Cmd（macOS）点选多个 option，或者拖选、Shift 连选。
常见错误是只写 <select multiple></select> 却没注意默认不显示滚动区域：浏览器会把下拉框渲染成「多行列表」而非「点击展开的下拉」，高度由 size 属性控制，不是传统下拉样式。
-
size值设为 1 时，多数浏览器仍显示为单行带滚动箭头（但行为已是多选），适合想保留下拉感的场景 - 设为 3 或更大，就直接显示 3 行可选项，用户无需点击即可看到部分选项
- 如果不设
size，部分浏览器（如 Chrome）会按multiple默认行为渲染为固定高度多行控件，而非下拉弹层
获取选中的值要用 select.selectedOptions，别遍历 options
JS 里读取多选结果，最直接安全的方式是访问 selectedOptions 集合，它只包含当前被选中的 option 元素，不需要手动判断 option.selected。
容易踩的坑：用 select.value 只能拿到第一个选中项的值（即使多选），而遍历所有 options 并检查 .selected 虽然可行，但冗余且易出错（比如动态增删 option 后状态不同步）。
立即学习“前端免费学习笔记（深入）”；
const select = document.getElementById('mySelect');
const selectedValues = Array.from(select.selectedOptions).map(opt => opt.value);
// 得到 ['apple', 'banana'] 这样的字符串数组
移动端多选体验差，multiple 在 iOS Safari 上基本不可用
iOS 系统级限制导致：Safari 中带 multiple 的 select 会被降级为单选，且点击后弹出的是系统原生单选 Picker，无法多选。Android 浏览器表现也不统一，部分仅支持长按多选但无视觉反馈。
这意味着，如果你的页面需要在手机上可靠支持多选，必须放弃原生 select[multiple]，改用 JS 实现的下拉菜单（如基于 div + checkbox 的模拟组件）。
- 原生方案只建议用于桌面端管理后台、内部工具等可控环境
- 表单提交时，
select[multiple]会自动以同名多值方式提交（如fruits=apple&fruits=banana），后端需按数组接收 - 如果用 AJAX 提交，记得把
selectedValues显式转成数组传参，别依赖FormData自动收集（某些老浏览器对 multiple select 支持不全）
样式限制大，<select multiple></select> 几乎没法用 CSS 定制外观
浏览器对 select[multiple] 的样式控制非常有限：appearance: none 大多无效，option 标签不能加 padding、border 或背景渐变，hover 效果也难统一。
想做品牌色、圆角、图标、搜索过滤、分组折叠？原生方案做不到。这时候就得权衡：是接受简陋但零依赖的原生控件，还是引入轻量 JS 组件（如 Choices.js、TomSelect）或自己封装一个基于 div 的可访问多选下拉。
真要 hack 样式，唯一较稳的路径是隐藏原生 select，用 JS 同步状态到自定义 UI，并确保 ARIA 属性（aria-multiselectable、aria-selected）正确设置，否则屏幕阅读器会完全失效。
