省市区三级联动下拉菜单通过三个select标签实现，JavaScript监听前级change事件动态更新后级选项，数据源自本地JSON或JS对象，需严格匹配value值并合理控制disabled状态。
省市区三级联动下拉菜单，核心是用三个 <select> 标签分别控制“省”“市”“区”，通过 JavaScript 监听前一级的选择变化，动态更新后一级的选项内容。数据源通常来自 JSON 或 JS 对象，不依赖后端接口也能实现本地联动。
准备省市区数据结构
先定义一个层级清晰的 JS 数据对象（可简化为数组嵌套对象），例如：
每个省对应一个 cities 数组，每个城市再包含 areas 数组。数据越全越好，但首次开发可用少量示例验证逻辑，比如：
- 广东省 → 广州市、深圳市
- 广州市 → 越秀区、天河区、海珠区
- 深圳市 → 福田区、南山区、罗湖区
数据建议放在 <script> 标签内或独立 JS 文件中，避免硬编码在 HTML 里。
立即学习“前端免费学习笔记（深入）”；
HTML 中写三个 select 标签
按顺序排列，id 分别设为 province、city、area，初始都带一个提示选项：
<select id="province"><option value="">请选择省份</option></select><br><select id="city" disabled><option value="">请选择城市</option></select><br><select id="area" disabled><option value="">请选择区县</option></select>
注意：后两级默认加 disabled，防止用户未选省就操作市或区。
用 JavaScript 绑定联动逻辑
监听 province 的 change 事件，清空并填充 city；再监听 city 的 change，清空并填充 area。关键点：
- 每次填充前先清空下拉框（保留第一个提示项）
- 根据当前选中的 value 查找对应 cities 或 areas 数据
- 遍历生成
<option>并 append 到目标 select - 选完省后移除 city 的 disabled；选完市后移除 area 的 disabled
避免重复绑定事件，推荐用 addEventListener，不要直接写 onchange=...。
增强体验的小细节
用户操作更自然，还能减少误操作：
- 选择省之后，自动将 city 设为第一个有效选项（非空），并触发 change 以级联更新区
- 重置时统一清空三级，并重新 disabled city 和 area
- 可增加 loading 提示（比如 city 加载中显示“加载中…”），尤其数据量大时
- 移动端注意
select在 iOS 上样式受限，必要时可搭配第三方库如mobile-select
不复杂但容易忽略：确保数据里的省/市名称和 select option 的 value 严格一致（建议用拼音或标准编码做 key，避免中文空格或全半角问题）。
