可靠绑定 change 事件须用 addeventlistener('change', handler)，确保 dom 就绪（domcontentloaded 或 script 放 body 底部），spa 中防重复绑定；更新二级 select 前必须清空选项，推荐 cityselect.innerhtml = ''；动态创建 option 需显式设置 value 和 textcontent；静态省市区数据优先用本地映射，动态场景才走接口并处理加载状态、竞态与缓存；初始化需手动调用更新函数，切换时应保存并校验原城市值。
怎么给第一个 select 绑定 change 事件才可靠
直接写 onchange="handler()" 在 HTML 里，会漏掉键盘操作（比如用方向键选中后按回车），也容易被后续 JS 覆盖。必须用 addEventListener('change', handler)。
绑定前确保 DOM 已就绪：别在脚本顶部直接 document.getElementById('province')，要么包在 DOMContentLoaded 里，要么把 script 放在 body 底部。SPA 场景下还要防重复绑定——加个标志位或先 removeEventListener 再绑。
更新第二个 select 前为什么必须清空选项
不清空就直接 appendChild 或拼接 innerHTML，会导致选项越点越多，这是最常复现的 bug。
-
citySelect.innerHTML = ''最简洁，现代浏览器都支持 - 兼容 IE11？用
while (citySelect.options.length) citySelect.remove(0) - 千万别用
innerHTML += '<option>...</option>'，XSS 风险高，且 value/text 容易错位 - 动态创建 option 时，必须显式设
option.value和option.textContent，不能只靠 innerHTML
数据从哪来：本地映射和接口请求怎么选
省市区这类结构稳定、总量可控（全国不到 4000 条）的数据，90% 场景用 JS 对象映射就够了，快、稳、不发请求。
真要查全国区县或带搜索的动态分类（比如“商品类目→品牌→型号”），才走接口。这时必须处理：
- 请求前设
citySelect.disabled = true，避免用户连点触发多个并发 - 用
AbortController取消上一次未完成的请求，防竞态 - 缓存已加载过的省份对应城市列表，第二次点开直接读，不重发
- 加载中显示 “加载中…” 或禁用状态，别让用户干等
初始化和默认值怎么同步
页面加载时，如果第一个 select 有默认值（比如 URL 带参数或后端渲染了 selected），第二个菜单不会自动更新——你得手动触发一次事件。
别用 select.dispatchEvent(new Event('change')) 模拟，容易出兼容问题。更稳妥的是抽一个公共函数，比如 updateCityOptions(provinceValue)，初始化和事件回调都调它。
用户切换后想保留上次城市选择？得在清空前记下 citySelect.value，填完新选项再赋回去；但要注意：新列表里可能没有那个 value，得加一层存在性判断，否则会静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
