select元素不支持optgroup嵌套实现三级联动，必须用三个独立select通过fetch和事件监听级联控制，关键在状态同步、竞态处理与disabled语义化控制。
为什么 select 元素不能直接嵌套 optiongroup 实现三级联动
浏览器原生 <select></select> 不支持动态插入 <optgroup></optgroup> 的子级 <optgroup></optgroup> —— HTML 规范只允许 <optgroup></optgroup> 包含 <option></option>，嵌套 <optgroup></optgroup> 会被忽略或导致渲染异常。所以所谓“三级下拉”，本质是三个独立 <select></select> 元素的级联控制，而非单个 DOM 结构嵌套。
如何用 fetch + 事件监听实现省市区三级联动
核心逻辑是：前一级 change 事件触发下一级数据请求，并清空、重置后续所有下拉框。关键点不在 DOM 嵌套，而在状态同步和加载防抖。
- 第一级（省）初始化时用静态 JSON 或首次
fetch('/api/provinces')加载，避免空状态 - 第二级（市）必须在第一级选中后才发起请求，URL 依赖上一级
value，例如fetch(`/api/cities?province_id=${selProvince.value}`) - 第三级（区）同理，但需注意：若用户快速切换省→市，可能产生竞态请求，建议用
AbortController取消前序未完成请求 - 每次更新下拉内容前，先清空
innerHTML = ''，再批量插入<option></option>，避免残留旧选项
为什么 disabled 属性比 display: none 更适合隐藏下级 select
用 disabled 而非 CSS 隐藏，是因为它能天然阻止用户交互、跳过表单提交、且语义正确。更重要的是：当上级未选择时，下级 <select disabled></select> 的值不会被序列化进 FormData，避免后端收到空字符串或默认值。
- 初始状态：第二、三级
<select disabled></select>，并设value="" - 启用时用
selCity.disabled = false，禁用时用selCity.disabled = true - 不要用
selCity.style.display = 'none'—— 这会导致键盘导航失效，且 submit 时仍可能提交空值
后端接口设计要匹配前端的 loading 状态反馈
前端需要明确知道请求是否 pending，否则用户连续点击会重复触发。后端不必返回特殊字段，但前端必须自己管理 loading 状态。
- 每次 fetch 前设置
selCity.classList.add('loading')，成功/失败后移除 - 禁用按钮或 select 本身期间，加
pointer-events: none; opacity: 0.6视觉反馈 - 错误处理不能只 console.log，要显示友好的提示，比如
selCity.dataset.error = '网络错误，请重试'并在旁边插入<small class="error"></small> - 缓存省级列表即可，市级以下建议不缓存 —— 行政区划变更虽少，但一旦变动，本地 localStorage 缓存会导致数据陈旧
最易被忽略的是第三级依赖第二级 value 的时机：必须等第二级 DOM 更新完成（await Promise.resolve() 或使用 requestAnimationFrame），再监听其 change 事件，否则可能错过第一次触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
