必须为两个select设置id并添加语义化空选项：第一个含<option value="">请选择</option>，第二个初始为<option value="" disabled>请先选择上级</option>；事件监听须在DOMContentLoaded后通过getElementById绑定，更新前清空二级select并禁用防并发。
怎么搭两个 select 的 HTML 结构才不翻车
必须让 DOM 节点可稳定获取，且初始状态语义清晰。别把第二个 select 写成空标签或塞满全国城市——用户选“新疆”时看到“朝阳区”就是逻辑错。
- 第一个
select加一个<option value="">请选择</option>，value 为空字符串，不是"0"或"null" - 第二个
select初始带一个提示项：<option value="">请先选择上级</option>，并设disabled属性 - 两个
select都要加id（如provinceSelect、citySelect），别只靠name或class查找 - 避免在 HTML 里写
onchange="xxx()"—— 键盘操作、屏幕阅读器、快捷键选中时不会触发
addEventListener('change') 怎么绑才真正生效
绑错时机或重复绑定，是 change 事件“看起来没反应”的最常见原因。DOM 没加载完就查元素，返回 null，后续一切白搭。
- 确保代码在
DOMContentLoaded或window.onload后执行，或把 script 放在 body 底部 - 用
document.getElementById('provinceSelect').addEventListener('change', handler)，别漏掉.getElementById返回值判空 - SPA 场景下复用组件时，先调
removeEventListener再重新绑，或用布尔变量标记是否已绑定 - 不要监听
click或input替代change—— 用户用方向键+回车切换选项时，click不触发
更新二级 select 前必须清空的三种写法
不清空就追加，会导致选项越点越多；用 innerHTML = '' 看似快，但会重置已选值、丢失 focus、触发多余渲染。
- 最稳妥：用
replaceChildren()（现代浏览器）：citySelect.replaceChildren(new Option('请选择城市', '')) - 兼容 IE11：循环移除
while (citySelect.options.length) citySelect.remove(0) - 折中写法：直接赋值
innerHTML并包含默认项：citySelect.innerHTML = '<option value="">请选择城市</option>'，语义明确且重置状态 - 千万别用
innerHTML += '...'拼接，接口数据若含恶意字符可能触发 XSS
为什么第一次选完，第二次再选就卡住或报错
多数不是代码写错，而是异步请求没守好边界。比如用户快速连点“广东”“江苏”，两次 fetch 并发返回，后返回的覆盖先返回的，结果城市列表对不上当前省份。
立即学习“前端免费学习笔记（深入）”；
- 每次触发 change 后，立刻禁用下游
select：citySelect.disabled = true - 请求前清空并插入“加载中…”项，避免用户误操作
- 用
AbortController主动取消上一次未完成的请求（fetch 场景），IE11 可用标志位 + 忽略过期响应模拟 - 缓存已加载的数据，例如用
Map存cache.set(provinceId, cities)，下次直接读，不发请求
value 写进 URL 参数或 localStorage，重载后手动恢复。 
