使用可创建多选下拉菜单，需配合size属性提升可见性，selected设默认选项，JS用select.selectedOptions获取全部选中值，但iOS Safari不支持多选。
用 HTML 的 <select></select> 标签创建多选项下拉菜单，核心是加 multiple 属性，并合理配合 size 和 <option></option> 使用。
基础写法：添加 multiple 属性
只需在 <select></select> 标签中加入 multiple（布尔属性，有即生效），就启用了多选功能：
- 用户在 Windows/Linux 上按住 Ctrl 键点击多个选项；在 macOS 上按住 Cmd 键操作
- 也可用鼠标拖拽框选，或按住 Shift 连续选择
- 不加该属性时，无论怎么点都只能选一个
提升可用性：设置 size 属性
size 控制可见行数，直接影响用户能否发现这是个多选控件：
- 不设
size：多数浏览器默认只显示 1 行（带滚动条），外观和单选几乎一样，容易误判 - 设
size="4"：直接展示 4 个选项，用户一眼看出可多选，也免去展开动作 - 设
size="1"：部分浏览器仍保留下拉箭头样式，兼顾“下拉感”与多选逻辑
预设默认选中项与取值方法
初始加载时想让某些选项默认被选中，给对应 <option></option> 加 selected 属性即可：
立即学习“前端免费学习笔记（深入）”；
- 例如：
<option value="coding" selected>编程</option> - JS 中读取当前选中值，必须用
select.selectedOptions，不是select.value -
select.value只返回第一个选中项的值，多选时会丢失其余数据 - 推荐写法：
Array.from(select.selectedOptions).map(opt => opt.value)
注意移动端兼容性问题
原生 <select multiple></select> 在手机端表现不稳定：
- iOS Safari 会强制降级为单选弹窗，完全不支持多选
- 如需全平台稳定多选，建议改用自定义组件（如
<div> + 复选框 + JS 控制） <li>原生方案更适合桌面端后台系统、内部工具等可控场景</li> </div>
