change事件绑定失效主因是DOM未就绪或元素不存在，需确保脚本在DOMContentLoaded后执行、ID准确存在；二级select更新前须清空选项；异步请求需防竞态；三级联动须重置下游所有层级。
change 事件绑不生效？先确认 DOM 加载时机和元素是否存在
绝大多数“联动没反应”问题，不是逻辑写错了，而是 document.getElementById 拿到的是 null。脚本在 <select> 标签还没解析完时就执行，自然查不到元素。
必须确保绑定代码在 DOM 就绪后运行：
- 用
document.addEventListener('DOMContentLoaded', () => { ... }) - 或把
<script>放在</body>前 - 别依赖
window.onload——它等所有资源（含图片）加载完，太晚
还要检查是否漏写了 id 属性：provinceSelect 和 citySelect 必须真实存在，不能只靠 name 或 class；也别在 HTML 里写 onchange="xxx()"，键盘选中、屏幕阅读器都不会触发它。
二级 select 更新前不清空？选项会越叠越多
每次用户切换一级选项，二级 select 必须重置：清空已有 option、禁用状态、还原默认提示项。否则上次的“北京”“上海”还在，这次点“新疆”又追加“乌鲁木齐”，选项就混了。
立即学习“前端免费学习笔记（深入）”；
推荐三种清空方式（按兼容性排序）：
- 现代浏览器（Chrome 86+、Firefox 76+）：
citySelect.replaceChildren(new Option('请选择城市', ''))—— 最干净，不重置 focus，不丢已选值 - 兼容 IE11：
while (citySelect.options.length) citySelect.remove(0)—— 安全，逐个删，不触发渲染抖动 - 折中写法：
citySelect.innerHTML = '<option value="">请选择城市</option>'—— 语义明确，但会重置value和焦点
千万别用 innerHTML += '...' 拼接，既可能 XSS，又会让旧选项残留。
异步请求返回错乱？得管住并发和响应归属
用户快速连点“广东”“江苏”，两个 fetch 并发发出，后返回的响应覆盖先返回的，结果“江苏”的城市列表出现在“广东”下拉里——这是典型的竞态问题。
防错要点很实在：
- 触发 change 后立刻设
citySelect.disabled = true，视觉+交互双重锁定 - 每次请求前生成唯一标识（如用当前
provinceSelect.value记录“本次请求应匹配的省”） - 响应回来时先比对标识，不匹配就直接丢弃（不用
AbortController也能守好边界） - 后端返回结构尽量扁平：
[{province: "广东", cities: ["广州", "深圳"]}]，前端查表 O(1)，别扔来一棵嵌套深树让 JS 递归
三级联动时容易漏掉的状态重置点
从省→市→区三级联动，很多人只清二级，忘了三级。比如选完“广东-深圳”后切到“江苏”，市下拉变成“南京”“苏州”，但区下拉还挂着“南山区”——这明显是 UI 状态和数据不一致。
真正健壮的做法是：只要任意上游 select 值变更，下游所有层级都要同步重置：
- 清空 options
- 设
value = "" - 设
disabled = true - 还原提示项（
<option value="" disabled>请先选择上级</option>）
这个“重置链”不能靠人肉判断哪几级要清，而应统一按 data-level 或 DOM 顺序自动向后遍历处理——否则加到四级、五级时，维护成本就失控了。
