ThinkPHP6地区三级联动通过前后端分离实现：后端提供两级接口（省列表、子级列表），使用国家标准行政区划代码；前端监听change事件动态请求并渲染，配合JSON数据源与缓存优化提升性能。
ThinkPHP6 实现地区三级联动（省→市→区）的核心在于前后端分离协作：后端提供结构化接口，前端按需请求并动态渲染下一级选项。不依赖模板引擎硬编码，也不用一次性加载全部数据，兼顾性能与体验。
后端接口设计
定义两个关键接口：
-
获取省级列表：GET
/api/areas?level=1，返回所有省份 ID 和名称； -
获取子级列表：GET
/api/areas?pid={parent_id}&level={2或3}，例如传pid=110000&level=2获取北京市下所有地级市。
数据源建议使用轻量 JSON 文件（如从 Vant 的 @vant/area-data 导出的中国行政区划 86 编码数据），避免数据库频繁查询。在控制器中读取并按 pid 过滤即可，无需建表。
前端联动逻辑
用原生 JS 或主流框架（如 Vue）监听上一级 select 的 change 事件：
- 清空下一级下拉框，并置为禁用状态；
- 发起 AJAX 请求，携带当前选中的 value（即上级编码）；
- 成功后遍历响应数据，动态生成
<option>插入对应<select>； - 若返回空数组，可显示“暂无下级区域”提示。
注意：不要用 id 做唯一标识传递，应统一使用国家标准的 6 位或 12 位行政区划代码（如 110000 → 110100 → 110101），便于后续扩展乡镇级或对接政务系统。
缓存与性能优化
地区数据基本不变，适合强缓存：
- 接口响应头添加
Cache-Control: public, max-age=31536000（一年）； - 前端可将已加载过的省市数据本地缓存（如 sessionStorage），避免重复请求；
- 首次进入页面时，可预加载省级列表，用户点击后再按需拉取市级、区级。
不需要每次切换都走服务端——静态数据 + 客户端缓存，足够支撑绝大多数业务场景。
