使用可创建多选下拉菜单，需配合size属性提升可见性，selected设默认选项，JS用select.selectedOptions获取全部选中值，但iOS Safari不支持多选。

用 HTML 的 标签创建多选项下拉菜单，核心是加 multiple 属性，并合理配合 size 和 使用。

基础写法：添加 multiple 属性

只需在 标签中加入 multiple（布尔属性，有即生效），就启用了多选功能：

• 用户在 Windows/Linux 上按住 Ctrl 键点击多个选项；在 macOS 上按住 Cmd 键操作
• 也可用鼠标拖拽框选，或按住 Shift 连续选择
• 不加该属性时，无论怎么点都只能选一个

提升可用性：设置 size 属性

size 控制可见行数，直接影响用户能否发现这是个多选控件：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 不设 size：多数浏览器默认只显示 1 行（带滚动条），外观和单选几乎一样，容易误判
• 设 size="4"：直接展示 4 个选项，用户一眼看出可多选，也免去展开动作
• 设 size="1"：部分浏览器仍保留下拉箭头样式，兼顾“下拉感”与多选逻辑

预设默认选中项与取值方法

初始加载时想让某些选项默认被选中，给对应 加 selected 属性即可：

• 例如：编程
• JS 中读取当前选中值，必须用 select.selectedOptions，不是 select.value
• select.value 只返回第一个选中项的值，多选时会丢失其余数据
• 推荐写法：Array.from(select.selectedOptions).map(opt => opt.value)

注意移动端兼容性问题

原生 在手机端表现不稳定：

• iOS Safari 会强制降级为单选弹窗，完全不支持多选
• 如需全平台稳定多选，建议改用自定义组件（如
  + 复选框 + JS 控制）
• 原生方案更适合桌面端后台系统、内部工具等可控场景