省-市-区三级联动
文件地址：https://pan.baidu.com/s/1R_oNE-jtndhGfdF6z1abmA
提取码：3ftn
方式一：使用js文件
1、页面HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--edge浏览器H5兼容设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--360浏览器H5兼容设置-->
<meta name="renderer" content="webkit" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--导入核心文件-->
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/distpicker.data.js"></script>
<script type="text/javascript" src="../js/distpicker.js"></script>
</head>
<body>
<div class="" data-toggle="distpicker">
*省/直辖市：
<select id="province-list" name="" data-province="---- 选择省 ----"></select>
*城市：
<select id="city-list" name="" data-city="---- 选择市 ----"></select>
*区县：
<select id="area-list" name="" data-district="---- 选择区 ----"></select>
</div>
</body>
</html>
2、三个js文件：
<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/distpicker.data.js"></script>
<script type="text/javascript" src="../js/distpicker.js"></script>
方式二：使用数据库、ajax
加载页面时前端页面传递”parent=86”，表示全部省份信息，通过点击某个省份，将它的省份信息（code值，省份名称）显示在页面上，触发市的点击事件，同时将省份的code的值传递到后端（controller），此时传递的省份的code相当于市的parent值（省份的code，是市的父，也就是parent的值），县级也是类似操作。
1、前端HTML（去掉js文件）
<script type="text/javascript">
//value属性用于表示当前的这个区域的code的值
let defaultOption = "<option value='0'>---- 选择区 ----</option>"
$(document).ready(function () {
$("#province-list").append(defaultOption);
showProvinceList();
//设置默认的“请选择”的值，作为控件的默认值
$("#city-list").append(defaultOption);
$("#area-list").append(defaultOption);
});
/*
* change（）函数用于监听某个控件是否发生改变，一旦发生改变就会触发参数的函数
* 需要传递一个function（）{}
* */
/*市的下拉列表数据展示*/
$("#province-list").change(function () {
//先获取到行政区父代码
let parent = $("#province-list").val();
//清空select下拉列表中的所有option元素
$("#city-list").empty();
$("#area-list").empty();
//填充默认值“请选择"
$("#city-list").append(defaultOption);
$("#area-list").append(defaultOption);
if(parent==0){
return;
}
$.ajax({
url: "/districts",
type: "POST",
data: "parent="+parent,
dataType: "JSON",
success: function (json) {
if (json.state == 200) {
let list = json.data;
//使用length来获取长度
for (let i = 0; i < list.length; i++) {
let opt =
"<option value='"+list[i].code+"'>"+list[i].name+"</option>";
$("#city-list").append(opt);
}
} else {
alert("市信息加载失败");
}
}
});
});
/*区的下拉列表数据展示*/
$("#city-list").change(function () {
//先获取到行政区父代码
let parent = $("#city-list").val();
//清空select下拉列表中的所有option元素
$("#area-list").empty();
//填充默认值“请选择"
$("#area-list").append(defaultOption);
if(parent==0){
return;
}
$.ajax({
url: "/districts",
type: "POST",
data: "parent="+parent,
dataType: "JSON",
success: function (json) {
if (json.state == 200) {
let list = json.data;
//使用length来获取长度
for (let i = 0; i < list.length; i++) {
let opt =
"<option value='"+list[i].code+"'>"+list[i].name+"</option>";
$("#area-list").append(opt);
}
} else {
alert("县区信息加载失败");
}
}
});
});
/*省的下拉列表数据展示*/
function showProvinceList() {
$.ajax({
url: "/districts",
type: "POST",
data: "parent=86",
dataType: "JSON",
success: function (json) {
if (json.state == 200) {
let list = json.data;
//使用length来获取长度
for (let i = 0; i < list.length; i++) {
let opt =
"<option value='"+list[i].code+"'>"+list[i].name+"</option>";
$("#province-list").append(opt);
}
} else {
alert("省/直辖区信息加载失败");
}
}
});
}
</script>
2、mapper文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namespace：dao接口中的全限定名称-->
<mapper namespace="pdsu.boot.store.mapper.DistrictMapper">
<!--使用insert,update,delete,select标签写sql-->
<select id="findByParent" resultType="pdsu.boot.store.entity.District">
SELECT *
FROM t_dict_district
WHERE parent = #{parent}
</select>
<select id="findNameByCode" resultType="java.lang.String">
SELECT name
FROM t_dict_district
WHERE code = #{code}
</select>
</mapper>
3、DistrictMapper
public interface DistrictMapper {
/**
* @Description 根据父代号查询区域信息
* @param parent ：父代号
* @reutrn 某个父区域下的所有区域列表
* @Date 2022/3/22
*/
List<District> findByParent(String parent);
String findNameByCode(String code);
}
4、IDistrictService
public interface IDistrictService {
/**
* @param parent ：父代码
* @Description 根据父代号来查询区域信息（省市区）
* @reutrn 多个区域的信息
* @Date 2022/3/22
*/
List<District> getByParent(String parent);
/**
* @Description 根据代号查询对应的名称
* @param code ：代号
* @reutrn 返回名称
* @Date 2022/3/22
*/
String getNameByCode(String code);
}
5、DistrictServiceImpl
@Service
public class DistrictServiceImpl implements IDistrictService {
@Autowired
private DistrictMapper districtMapper;
/**
* @param parent ：父代码
* @Description 根据父代号来查询区域信息（省市区）
* @reutrn 多个区域的信息
* @Date 2022/3/22
*/
@Override
public List<District> getByParent(String parent) {
List<District> list = districtMapper.findByParent(parent);
//进行网络数据传输是，为了尽量避免无效数据的传递，可以将无效数据设置为null
//可以节省流量，另一方面提升效率
list.forEach(district -> {
district.setId(null);
district.setParent(null);
});
return list;
}
/**
* @Description 根据代号查询对应的名称
* @param code ：代号
* @reutrn 返回名称
* @Date 2022/3/22
*/
@Override
public String getNameByCode(String code) {
return districtMapper.findNameByCode(code);
}
}
6、DistrictController
@RestController
@RequestMapping("districts")
public class DistrictController {
@Autowired
private IDistrictService districtService;
//districts 开头的请求都被拦截到gentByParent()方法
@RequestMapping({"/",""})
public JsonResult<List<District>> getByParent(String parent){
List<District> data = districtService.getByParent(parent);
return new JsonResult<>(OK,data);
}
}
7、工具类JsonResult
package pdsu.boot.store.util;
import java.io.Serializable;
/*
* Json格式的数据进行响应
* */
public class JsonResult<E> implements Serializable {
/*状态码*/
private Integer state;
/*描述信息*/
private String message;
/*数据*/
private E data;
public JsonResult() {
}
public JsonResult(Integer state) {
this.state = state;
}
public JsonResult(Throwable throwable) {
this.message = throwable.getMessage();
}
public JsonResult(Integer state, E data) {
this.state = state;
this.data = data;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public E getData() {
return data;
}
public void setData(E data) {
this.data = data;
}
}
8、数据库文件
parent：表示的是“父”区域代码号
code：本身代号
name：代号代表的名称
笔记如有帮助，希望大家给个一键三连，鼓励一下！！！！！
1738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
