SpringBoot 全国省市区三级联动 Ajax动态绑定select

SpringBoot 全国省市区三级联动 Ajax动态绑定select

---

前言

全国省市区的联动算是很经典的一个三级联动的例子了，今天结合SpringBoot，实现此功能

---

一、三级联动？

也就是子级随着父级的变化，子级也需要随之改变。

二、分析与编码

1、数据库

全国省份表:	 

全国市级表:	

全国区名表:

我们观察数据库能观察得出来，三级联动，首先选择省份之后，通过选择得到此省份的code值，根据此code值去市级表匹配 [provincecode]省份code)字段的值去查询，城市匹配区域也是同理。

2、SQL

1、查询省份是查所有就不多说了

2、根据选择的省份查询所有城市

带入场景我们选择河北，得到的code值是130000

SQL如下：

SELECT * 
FROM `t_address_city` AS c 
INNER JOIN t_address_province AS p
ON p.`code`=c.provincecode WHERE p.`code`=130000

3、根据选择的城市得到所有区域跟上一步一样不再啰嗦

3、编写Controller

第一个查询省份是查询所有

查询第市级是需要根据前台所选择的哪个省份所传过来的code值决定

查询地区也是跟上一步同理

4、Ajax动态绑定select

前端页面

![在这里插入图片描述](https://img-blog.csdnimg.cn/9266ce3b05954182af5b52b36642914b.png

省份下拉框选中事件异步请求得到数据绑定下拉框

选择市级绑定区域也是同理，要注意$("#xxx")选择的Select标签的id

总结

以上就是本篇文章要讲的内容，本文仅仅简单分析了省份三级联动数据库，异步请求方便了动态绑定，最重要的还是要先分析数据库结构，一级一级根据code值来查询，想通这点，就没什么大问题了。