使用和实现下拉选择列表，需确保包裹、设置name属性、正确使用selected/disabled/multiple/size/等特性，避免常见错误导致功能失效。
用 <select></select> 和 <option></option> 实现选择列表
HTML 里定义下拉式选择列表，核心就是 <select></select> 元素套 <option></option>。浏览器自动渲染成可点击展开的控件，不需要 JS 就能工作。
常见错误是把 <option></option> 直接写在文档 body 里，或者漏掉 <select></select> 包裹——这样不会触发选择行为，只显示文字。
-
<select></select>必须有开始和结束标签，不能自闭合（<select></select>无效） - 每个
<option></option>至少要有value属性或文本内容，否则提交时可能为空字符串 - 默认选中用
selected布尔属性：<option value="2" selected>选项二</option> - 禁用某项用
disabled：<option disabled>不可选</option>
multiple 属性开启多选，但得配合 Ctrl/Command 键
加 multiple 属性后，<select></select> 变成多选框，视觉上会显示多行（或带滚动条），但用户必须按住 Ctrl（Windows/Linux）或 Cmd（macOS）再点选——这点容易被忽略，导致测试时以为“点不中”。
服务端接收时，multiple 提交的是同名参数多个值（如 city=beijing&city=shanghai），不是逗号分隔字符串。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对
multiple支持有限，常回退为单选弹窗，别依赖它做关键多选流程 - 若想纯 UI 多选又保兼容，建议改用
<input type="checkbox">组合 -
size属性可强制显示行数（如size="4"），此时即使没multiple也能看到多个选项，但仍是单选
<optgroup></optgroup> 分组时 label 属性不能空，且不可选中
用 <optgroup></optgroup> 给选项分组，能让长列表更清晰。但它只是视觉分组容器，本身不能被选中，也不能设 value。
如果忘了写 label 属性，Chrome 和 Firefox 会显示空白分组标题，Safari 可能直接忽略整个 <optgroup></optgroup>。
-
label是必填属性：<optgroup label="华东"></optgroup>，空字符串label=""也无效 - 嵌套
<optgroup></optgroup>不合法，HTML 规范只允许一级嵌套在<select></select>下 - 分组内
<option></option>的disabled仍生效，但<optgroup disabled></optgroup>会让整组灰掉且不可展开
无障碍和表单提交：别漏掉 name 和 id
没有 name 属性的 <select></select> 在表单提交时不会发送任何数据，哪怕用户选了——这是后端收不到值的最常见原因。
id 虽不影响功能，但关联 <label for="xxx"></label> 后，点击标签就能聚焦下拉框，对鼠标和屏幕阅读器都关键。
- 动态生成的
<select></select>容易漏设name，尤其用 JS 拼 HTML 字符串时 - 多个同名
name的<select></select>会覆盖提交，只发最后一个的值（除非用了multiple） - 服务端解析时，注意
value是字符串类型，即使写的是数字（如value="1"），别直接当整数用
实际项目里最容易出问题的，是 name 缺失、multiple 的交互预期偏差，还有 <optgroup></optgroup> 的 label 写错或为空。这三处一错，要么前端看不见效果，要么后端收不到数据，排查起来反而比写逻辑还花时间。