基础下拉框用<select>包裹<option>即可，必须含name属性和至少一个<option>，value决定提交值，selected设默认选中，disabled可禁用整体或单选项。
用 <select> 和 <option> 搭出基础下拉框
HTML 下拉框本质就是 <select> 元素包裹若干 <option>，浏览器自动渲染成可点击展开的控件。不需要 JS 就能工作，但必须配对使用——<select> 不能单独存在，里面至少得有一个 <option> 才会显示默认选项。
常见错误是把文本直接写在 <select> 标签里（比如 <select>请选择</select>），这不会生效；或者漏掉 <option> 的 value 属性，导致表单提交时只传空字符串或标签文本。
-
<option>的value值决定提交内容，textContent（标签内文字）决定用户看到的内容，二者可以不同 - 加
selected属性让某个选项默认被选中，多个selected时仅第一个生效 - 支持
disabled属性禁用单个选项，或给<select>加disabled禁用整个控件
<select name="city"> <option value="">-- 请选择城市 --</option> <option value="bj">北京</option> <option value="sh" selected>上海</option> <option value="gz" disabled>广州（暂不开放）</option> </select>
让下拉框支持多选：加 multiple 属性
默认下拉框只能单选，加 multiple 后变成可按 Ctrl/Cmd 多选的列表样式（不是展开式下拉），视觉和交互都变了。注意：它不兼容移动端原生下拉体验，iOS Safari 会强制弹出全屏选择器，Android 表现也不统一。
如果只是想让用户“从多个值里挑一个”，别用 multiple；真要多选，还得配合后端接收数组格式数据（如 name="hobbies" 提交时可能发 hobbies=reading&hobbies=swimming）。
立即学习“前端免费学习笔记（深入）”；
-
multiple是布尔属性，写上即生效，无需赋值，multiple="false"不起作用 - 建议搭配
size属性控制可见行数（如size="4"），否则默认只显示一行，用户看不到其他选项 - 没有
required时，空选是合法状态；若需至少选一项，得用 JS 或 HTML5 表单验证（但required对multiple的校验逻辑较弱）
用 <optgroup> 分组选项提升可读性
当选项超过 5–6 个，用户扫一眼很难定位。用 <optgroup> 按语义分组（比如“国内城市”“海外城市”），浏览器会渲染为带灰色标题的分隔区块，且标题不可选。
注意 <optgroup> 必须嵌套在 <select> 内，不能嵌套在另一个 <optgroup> 里；label 属性必填，否则该分组不渲染。
- 分组本身不能设
value，也不能被选中或提交 - 所有
<option>必须在某个<optgroup>内，或直接放在<select>下（即无分组项可与分组项共存） - 部分老版本 IE 对嵌套缩进渲染异常，但功能不受影响
<select name="country">
<optgroup label="亚洲">
<option value="cn">中国</option>
<option value="jp">日本</option>
</optgroup>
<optgroup label="欧洲">
<option value="de">德国</option>
<option value="fr">法国</option>
</optgroup>
</select>下拉框的无障碍访问关键点
屏幕阅读器依赖语义结构理解控件。纯 <select> 默认可读，但若没配 label，用户可能不知道这个下拉框是干啥的。最简方案是用 <label for="id"> 关联，ID 必须严格匹配 <select id="id">。
动态生成选项或 JS 控制状态时，容易破坏 aria-* 属性同步。例如用 JS 切换禁用状态，只改 disabled 属性不够，最好同步更新 aria-disabled="true"。
- 避免仅用 placeholder 式文字（如
<option value="">请选择</option>）代替<label>，这对语音用户不友好 - 不要用
display: none隐藏<option>，应改用disabled或移除节点，否则屏幕阅读器仍可能读出 - 移动端双击放大、焦点管理、键盘导航（Tab/方向键）都依赖原生行为，过度自定义样式（比如完全重绘下拉箭头）容易切断这些能力
实际项目里最容易被忽略的是：服务端没校验 <select> 提交的 value 是否在预设白名单内。前端限制只能防误操作，恶意请求绕过 HTML 直接发任意 value 很容易。
