下拉联动失效主因是执行时机与状态管理错误：DOM未加载完即获取元素、重复绑定事件、未清空旧选项、未重置下游状态、数据加载策略不当及异步请求竞态。
change 事件绑定时机不对，下拉联动根本不会触发
DOM 元素还没加载完就执行 document.getElementById，返回 null，后续所有逻辑都失效。这不是代码写错了，是执行顺序问题。
- 确保脚本在
DOMContentLoaded事件后运行，或把<script>放在</body>前 - 别用
window.onload——它等全部资源（含图片）加载完，太晚 - 检查是否重复绑定：SPA 页面切换时，
addEventListener被多次调用，导致一个操作触发多次更新 - 禁用内联
onchange="xxx()"：键盘操作（方向键+回车）、屏幕阅读器、快捷键选中都不会触发它
二级 select 更新前没清空，选项越点越多
这是最常踩的坑。不清空旧 option 就直接 appendChild，结果“北京”点一次出现东城/西城，“上海”点一次又追加黄浦/徐汇，最后列表里混着三地城市。
- 推荐用
select.replaceChildren(new Option('请选择', ''))：现代浏览器支持，语义清晰，不重置 focus，也不丢事件绑定 - 兼容 IE11？用
while (select.options.length) select.remove(0) - 绝对别用
innerHTML += '<option>...</option>'：XSS 风险高，且会重置已选值 - 每次更新前，顺手把下游
select.disabled = true，避免用户连点引发状态错乱
数据来源选错，性能和维护全崩
全国省市区三级数据有 3000+ 条，硬编码进 JS 对象里，首屏体积暴涨、JSON.parse 耗时、维护成本高——但 90% 的业务根本用不到全部数据。
- 静态结构（如固定几个省份）：用对象映射
const areaData = { "广东": ["广州", "深圳"] }，查areaData[provinceSelect.value]一行搞定 - 数据量大或需实时更新：用
fetch+async/await，请求前禁用下游 select，失败时设disabled并提示错误 - 后端返回树形结构？前端立刻转成 key-value map：
{ "province-12": [{value:"city-1", label:"广州"}] }，避免每次遍历过滤 - 接口并发问题：用户快速切换“广东”“江苏”，两次请求返回顺序错乱。解决方法是每次发请求前存一个 abortController，新请求来就 cancel 旧的
多级联动时默认状态丢失或残留
用户从“广东→深圳”切到“北京”，二级还显示“深圳”，三级甚至保留上次“南山区”的值——这不是 bug，是没主动重置下游状态。
立即学习“前端免费学习笔记（深入）”；
- 在每个
change处理函数开头，统一重置所有下游 select：citySelect.value = ''、districtSelect.innerHTML = '<option value="">请先选择城市</option>' - 给每级 select 加 class（如
class="filter-level-1"），方便用document.querySelectorAll('.filter-level-2, .filter-level-3')一键清理 - 初始 HTML 必须带语义化空选项：
<option value="">请选择</option>，不是"0"或"null"；二级初始要disabled，防止误提交 - 如果用了
replaceChildren()，记得补上默认项，否则用户第一次点开二级是空的，不知道该干嘛
value 或漏了 disabled 控制。 
