必须严格嵌套或，禁止混入其他标签；value属性决定提交值，name不可省略，移动端onchange需防抖，label关联提升可访问性。
直接用 <select></select> 包裹 <option></option> 就能生成可用的下拉菜单，但结构稍有错位或属性遗漏，就会导致选项丢失、提交值为空、默认选中失效，甚至移动端行为异常。
select 和 option 必须严格嵌套，不能夹杂其他标签
浏览器对 <select></select> 的子元素类型有硬性限制：只允许 <option></option>、<optgroup></optgroup> 或空白符。一旦混入 <div>、<code><span></span>、注释或文本节点，解析器会“自动修复”——把非法内容移出 <select></select>，结果是选项消失或出现两个独立控件。
- 错误写法：
<select><div><option>A</option></div></select>→ 实际渲染为<select></select><div><option>A</option></div> -
<optgroup></optgroup>只是视觉分组容器，不能嵌套，也不能被选中；它的label不参与表单提交 - 想实现“禁用某类选项”，必须给每个
<option></option>单独加disabled，而不是给<optgroup></optgroup>加
value 属性决定提交内容，不写就 fallback 到文本内容
后端接收到的值，永远来自 <option></option> 的 value 属性。如果漏写，浏览器会把显示文本（比如 <option>北京</option>）当作提交值——这在含空格、中文、特殊符号时极易出错，且无法统一控制格式。
- 推荐写法：
<option value="beijing">北京</option> - 空选项应显式设
value=""，并配合selected和disabled作提示项：<option value="" disabled selected>请选择</option> - 多个
selected时，以 HTML 中最后一个为准；selected和value=""可共存，不影响逻辑
name 属性不可省略，否则表单提交时字段直接消失
<select></select> 没有 name，就像没贴邮编的信封——浏览器根本不会把它放进提交数据里。哪怕你用 JS 读取了 value，后端也收不到这个字段。
- 必须写：
<select name="province"></select> - 关联
<label></label>用for属性，提升可访问性和点击体验：<label for="province">省份</label><select id="province" name="province"></select> - 二级联动场景下，两个
<select></select>的name必须不同，否则后端收到的是数组或被覆盖的单值
移动端 onchange 触发时机和防抖必要性
在 iOS Safari 和部分 Android 浏览器中，onchange 是在用户确认选择（如点击“完成”或滚轮停稳）后才触发，不是点击即发。若绑定的是实时搜索或接口请求，不做防抖容易重复调用或卡顿。
- 原生
onchange在移动端不响应中间滚动过程，只响应最终确认 - 不要依赖
onclick或oninput替代 —— 它们在<select></select>上基本无效或行为不一致 - JS 监听时建议加简单节流：
let timeout; select.addEventListener('change', () => { clearTimeout(timeout); timeout = setTimeout(() => doSearch(), 100); });
真正麻烦的不是写几行 HTML，而是 <select></select> 表面简单，实则每处属性都牵扯到表单语义、可访问性、跨端一致性。尤其当需要支持键盘导航、屏幕阅读器、或与框架状态同步时，一个没闭合的 <option></option> 或错位的 disabled 就能让整个交互链断裂。
