JavaScript地区选择三级联动菜单
地区选择的三级联动菜单，是前端项目里比较常用的一个交互组件，尤其在地址填写、商品分类这些场景中实用。它的核心思路也不复杂，就是用户选了省，再加载对应的市，选区。流程挺顺，用户体验也好。
三级菜单的数据结构一般是**嵌套的 JSON 格式**，像省里套城市，城市里套区县那种。你可以提前准备好整份数据，也可以做成**按需加载**的方式，通过 ID 动态去后端拉数据，减少首屏加载量。
前端实现上，其实不管你是用**原生 JavaScript**，还是**Vue/React**这类框架，思路都差不多：监听用户每一级的选择事件，更新下一层的下拉菜单内容。最常见的方式就是**加事件监听 + Ajax 求**，响应也快，代码也不复杂。
HTML 结构挺简单，三个<select>元素分别装省、市、区。样式可以根据 UI 设计走，记得下**响应式布局**，不然在手机上展示会尴尬。
后端部分要注意的是，接口设计要统一，建议返回格式为**统一的 JSON 数组**，每个子项有id、name、children字段。比如：
[
{
"id": "110000",
"name": "北京市",
"children": [
{"id": "110100", "name": "北京市"}
]
}
]对了，性能方面也别忽略。你可以做个**缓存机制**，比如用对象缓存已经求过的市/区数据，这样用户来回切换时不会重复求，挺省流量也提速。
如果你刚好在做类似表单或电商后台的项目，可以参考这几个资源：
如果你项目要做地区选择的功能，又不想重复造轮子，可以试着改改上面的例子，接一下你自己的数据接口就行了。
文件大小：58.3KB
评论区