用change事件实现省市区三级联动，核心是监听上级变化后异步加载或筛选下级数据并更新选项，需注意数据组织、事件绑定、选项清空重置及防重复触发。
用 change 事件实现省市区三级联动，核心是监听上级下拉框变化后，异步加载或筛选下级数据并更新选项。关键在于数据组织、事件绑定、选项清空与重置、以及防重复触发。
准备结构化地区数据
推荐使用嵌套对象或数组形式组织数据，例如：
const regionData = {
"北京": {
"市辖区": ["东城区", "西城区", "朝阳区", "海淀区"]
},
"广东": {
"广州": ["越秀区", "天河区", "海珠区"],
"深圳": ["福田区", "南山区", "罗湖区"]
}
};
或者更通用的扁平数组（含 code、name、parentCode），配合前端筛选或后端 API 查询。
绑定 change 事件并动态更新下级下拉框
为每个 <select></select> 绑定 change 事件，按层级顺序处理：
- 选中省份时，清空并禁用市、区下拉框，根据省份名查出对应市级列表，填入选项
- 选中城市时，清空并禁用区下拉框，再查出该市下属区列表
- 每次更新前先
innerHTML = ''或循环移除option，避免重复叠加 - 可加 loading 状态（如禁用下拉框 + 显示“加载中”选项）提升体验
注意初始化和重置逻辑
页面加载后应默认初始化省级下拉框；当上级被修改，下级必须重置为初始状态（如 <option value="">请选择</option>）：
- 不能只改
value，要清空所有子选项再重建 - 避免用户跳过某级直接选区（比如先选区再选省），可用
disabled控制可操作性 - 若用表单重置（
form.reset()），需确保 HTML 中各select有name属性且初始值正确
可选：结合 fetch 加载远程数据
如果地区数据量大或需实时更新，建议用 API 分层获取：
- 省：首次加载时
fetch('/api/provinces') - 市：监听省
change后，用选中的provinceCode请求fetch(`/api/cities?province=${code}`) - 区：同理基于城市 code 请求街道/区列表
- 记得加
loading提示和错误处理（如网络失败时显示提示、保留上次选项）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
