最直接的下拉列表用搭配实现，value决定提交值，name不可遗漏；multiple支持多选但兼容性差；可分组，占位项应disabled+selected；选项少时优先用radio/checkbox。
用 <select></select> 和 <option></option> 构建基础下拉列表
HTML 中最直接的选项列表就是下拉菜单，核心是 <select></select> 容器搭配多个 <option></option> 子元素。每个 <option></option> 的 value 属性决定表单提交时发送的值，而标签内文本是用户看到的内容。
常见错误是把 value 写成中文或带空格的字符串却不加引号，导致解析失败；或者漏写 name 属性，导致后端收不到该字段。
实操建议：
<select name="category"><option value="tech">技术</option> <option value="design">设计</option></select>- 默认选中某一项，给对应
<option></option>加selected属性（不要写selected="true"） - 禁用整个列表用
disabled在<select></select>上；只禁用某项则加在<option></option>上
让多选成为可能：multiple 属性和浏览器行为差异
加了 multiple 属性后，<select></select> 支持按住 Ctrl（macOS 是 ⌘）点选多个选项，但视觉表现因浏览器而异——Chrome 显示为滚动多行框，Safari 可能仍显示为下拉箭头，需点击展开才见多选态。
关键点在于：提交时同名字段会以数组形式发送（如 hobby[]=reading&hobby[]=coding），后端需按数组接收；若用 JavaScript 读取，selectElement.selectedOptions 返回的是 HTMLCollection，不是普通数组，遍历时别直接用 .map()。
实操建议：
- 必须显式设置
size属性（如size="4"）才能在多数浏览器中直观显示多选项，否则可能只显示一行且无提示 - 移动端对
multiple支持有限，iOS Safari 会降级为单选弹窗，有兼容需求时慎用 - 若要默认选中多个，给多个
<option></option>同时加selected
分组与占位：用 <optgroup></optgroup> 和空 <option></option> 提升可用性
当选项超过 5 个，用户扫一眼很难定位，<optgroup></optgroup> 能按语义分组并添加灰色标题（label 属性值），但它本身不可选、不能设 value。
常见误用是把占位提示（如“请选择城市”）做成一个真实 <option value=""></option>，结果提交时真的发了个空值过去。更稳妥的做法是让它既不可选又不参与提交：
- 加
disabled和selected，同时value留空：<option disabled selected value="">-- 选择省份 --</option> - 配合
required属性可强制用户切换选项，否则表单无法提交 -
<optgroup></optgroup>不能嵌套，也不能放在<select></select>外面
替代方案：为什么有时该用 <input type="checkbox"> 或 <input type="radio">
当选项数量少（≤6）、需要同时可见、或支持“全选/反选”操作时，复选框或单选按钮比下拉更合适。它们天然支持无障碍（label 关联明确），且无需额外 JS 就能实现多选状态同步。
性能上，几百个 <option></option> 会导致 <select></select> 渲染卡顿，而 checkbox 列表可通过虚拟滚动优化；但若选项动态加载，<select></select> 更容易配合 fetch + innerHTML 替换内容。
实操建议：
- 单选场景优先用
<input type="radio">，确保所有同名 radio 共享name值 - 多选且选项固定、数量适中，用 checkbox；若数量动态变化或超 20 项，再评估是否切回
<select multiple></select> - 别为了“看起来像下拉”而强行用第三方库包裹 checkbox，原生语义和键盘导航支持会打折扣
真正麻烦的不是写法，而是想清楚用户是在快速扫视、还是需要精确筛选；是在桌面端点鼠标，还是在手机上戳触摸目标。选项列表的形态，本质是交互路径的选择，不是标签的堆砌。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
