纯HTML无法实现级联选择器，必须用JavaScript控制数据联动和状态重置；监听change事件需确保DOM加载完成、正确绑定且防重复；下游选项须清空再渲染；fetch需处理异步边界、参数校验与错误兜底；数据结构推荐扁平映射表；回填需手动触发初始化。
纯 HTML 实现不了级联选择器，必须靠 JavaScript 控制数据联动和状态重置；select 嵌套只是 DOM 并列，不等于逻辑级联——选了省不会自动清空市，浏览器根本不理解“省→市→区”依赖关系。
怎么监听 change 事件才真正生效
绑定时机错、元素查不到、重复绑定，是事件“没反应”的三大主因。
- 别把
script放在里直接查document.getElementById('provinceSelect')，DOM 还没解析，返回null - 必须等
DOMContentLoaded或把script放在前 - 用
addEventListener('change', handler)，别写onchange = handler（会覆盖）或内联onchange="xxx()"（键盘操作不触发） - SPA 场景下复用组件，先
removeEventListener再绑，或用布尔标记防重复
每次上级变化后必须清空下游的三种写法
不清空就追加，选项越点越多；不清空就设 value，旧值残留导致提交错乱。
-
citySelect.innerHTML = '<option value="">请选择城市</option>'：语义清晰、重置状态、兼容性好 -
citySelect.replaceChildren(...options)：现代浏览器推荐，不触发多余渲染，不丢失 focus - IE11 兼容写法：循环
citySelect.lastChild && citySelect.removeChild(citySelect.lastChild) - 绝对别用
innerHTML += '...'，XSS 风险 + 状态混乱
为什么 fetch 加载二级数据总出错
不是接口挂了，是 JS 没守好异步边界：并发请求打架、空值未判、错误没兜底、加载中允许误操作。
- 每次
change触发后，立刻执行：citySelect.disabled = true+citySelect.innerHTML = '<option value="">加载中...</option>' - URL 必须带上游 ID：
/api/cities?province_id=110000，别拼错参数名或漏转字符串（后端传数字，JS 里要用String(pid)） - 必须检查
response.ok，不能只写.then()；404、500、网络中断都得进catch或if (!ok) - 用户快速连点“广东”“江苏”，要用
AbortController中断前一次请求，否则旧响应覆盖新状态
数据结构怎么设计才不翻车
嵌套对象看着直观，但 JS 遍历麻烦、键名不可枚举、类型不一致，实际开发中极易出错。
- 推荐扁平映射表：
const citiesByProvinceCode = { '110000': [{ code: '110100', name: '市辖区' }] } - 查的时候是 O(1)：
citiesByProvinceCode[provinceSelect.value]，不用递归遍历 - 所有
value字段必须是字符串（哪怕后端返回数字，也要String(id)转一下），否则表单提交时可能丢失 - 字段名统一：小写下划线（
province_code）或驼峰（provinceCode），别一会儿pid一会儿provinceId
最易被忽略的是回填逻辑：编辑已有地址时，直接 citySelect.value = '201' 不会触发 change，也不会展开第三级——级联 JS 逻辑根本没跑。必须手动调用初始化函数，并传入完整路径数组，例如 initCascader(['110000', '201', '20101'])，逐层展开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
