用 addEventListener('change') 绑定 select 变更事件，DOM 加载后执行并防重复绑定；更新次级下拉前清空选项，用 createElement 创建 option 防 XSS；静态数据优先本地映射，接口请求需加 loading 与缓存；表单提交需 preventDefault 或持久化状态。
select 元素怎么用 JavaScript 监听变化
下拉联动的前提是能及时捕获第一个 select 的选项变更。直接用 onclick 或 onchange 写在 HTML 里容易漏事件（比如键盘操作、快捷键选中），也不利于维护。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
addEventListener('change', handler)绑定，兼容鼠标点击和键盘操作（如回车、方向键确认） - 确保绑定时机：DOM 加载完成后再执行，否则
document.getElementById('province')可能返回null - 避免重复绑定：如果代码可能多次执行（如 SPA 页面复用），先
removeEventListener或用标志位控制
第二个 select 的 options 怎么动态清空和重填
不清空旧选项就直接 appendChild，会导致城市列表越点越多，这是最常踩的坑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次更新前先清空：
citySelect.innerHTML = ''或while (citySelect.options.length) citySelect.remove(0) - 不要用
innerHTML += ...拼接 option 字符串，容易 XSS（尤其数据来自接口时），优先用document.createElement('option') - 设置
option.value和option.textContent分开处理，避免 value 被意外转义或显示异常
数据从哪来：本地映射 vs 接口请求
省市区这种静态结构，90% 场景用 JS 对象映射就够了；真要查全国 3000+ 区县，才需要接口。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 本地映射示例：
const cities = { 'beijing': ['chaoyang', 'haidian'], 'shanghai': ['pudong', 'xuhui'] }，key 是省 code，value 是城市数组 - 接口请求时，务必加 loading 状态（禁用第二个
select或显示“加载中”），否则用户连续点击会触发多个并发请求 - 缓存接口响应：同一省份第二次点开，直接读缓存，不用再发请求
为什么选中后页面刷新，联动状态就丢了
表单提交默认整页刷新，所有 JS 状态归零。这不是联动逻辑错了，是没处理表单行为。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查是否写了
<form onsubmit="return false">或event.preventDefault()，否则提交即刷新 - 如果必须提交，把当前选中的值存进
localStorage或 URL 参数，页面重载后恢复 - 服务端渲染页面（如 PHP/Java 模板）时，注意不要让后端生成的
selected属性和前端 JS 冲突，优先以 JS 状态为准
联动本身不难，难的是边界情况：空数据、网络失败、用户狂点、键盘导航、屏幕阅读器支持……这些地方一漏，体验就断层。
