springboot实现省市区三级联查_jsdskakda的博客-爱代码爱编程
进入页面什么都不选择的情况
选择第一级省份,城市下拉框自动匹配对应省份
选择第二级城市 ,区县下拉框自动匹配对应城市
怎么实现呢,接下来看下代码
所属省份:
<select id="pCode" onchange="two()">
<option selected disabled>请选择</option>
<option th:each="province:${provinceList}" th:value="${province.code}" th:text="${province.name}">
</option>
</select>
所属城市:
<select id="cCode" onchange="three()">
<option selected disabled>请选择</option>
</select>
所属区县:
<select id="tCode">
<option selected disabled>请选择</option>
</select>
html页面创建下拉框
省份不需要条件,下拉框直接查询全部
@RequestMapping("/threeLevelLinkers")
public String getAllCity(Model model){
//查询所有省份
List<Province> provinceList = provinceService.list();
model.addAttribute("provinceList",provinceList);
return "list";
}
}
返回html页面, ,用thymeleaf获取值
第二个下拉框查询我们设立一个点击事件,点击时调用函数进入ajax
function two() {
//获取城市编码
var pcode = $("#pCode option:selected").val();
$.ajax({
//url
url:'/citys/two/'+pcode,
//参数
// data:{},
//请求类型
type:'get',
//响应体结果格式
dataType:'json',
//成功回调
success:function (data){
//清空节点
$('#cCode').empty();
$("#tCode").empty()
$("#cCode").append("<option>请选择</option>")
// $('#cCode').append("<option th:value='0'>请选择</option>>")
for (let i = 0; i <data.length ; i++) {
console.log(data[i].name)
$('#cCode').append("<option value='"+data[i].code+"'>"+data[i].name+"</option>>")
}
},
error:function (){
console.log('出错啦!')
}
}
)
}
然后根据ajax路径带参数省份编码跳转到controller
@Controller
@RequestMapping("/citys")
public class CityController {
@Autowired
private CityService cityService;
@ResponseBody
@RequestMapping("/two/{code}")
public List<City> two( @PathVariable("code")String code){
LambdaUpdateWrapper<City> wrapper=new LambdaUpdateWrapper<>();
wrapper.eq(City::getProvincecode,code);
List<City> cityByProvinceCode = cityService.list(wrapper);
return cityByProvinceCode;
}
}
这里用mp查询,根据省份编码查询城市,@ResponseBody把对象返回
每次点击清空上一次查询结果
$('#cCode').empty();
$("#tCode").empty()
成功返回里面调用函数,遍历新增节点,把名字放在节点里
for (let i = 0; i <data.length ; i++) {
console.log(data[i].name)
$('#cCode').append("<option value='"+data[i].code+"'>"+data[i].name+"</option>>")
}
第三级查询也一样,第三个下拉框查询我们设立一个点击事件,点击时调用函数进入ajax
function three() {
var cCode=$("#cCode option:selected").val()
$.ajax({
url: '/towns/three/'+cCode,
dataType: 'json',
type: 'get',
success:function (data) {
$("#tCode").empty()
$("#tCode").append("<option>请选择</option>")
for (let i = 0; i <data.length ; i++) {
$("#tCode").append("<option >"+data[i].name+"</option>")
}
}
})
}
然后根据ajax路径带参数省份编码跳转到controller
@Controller
@RequestMapping("/towns")
public class TownController {
@Autowired
private TownService townService;
@ResponseBody
@RequestMapping("/three/{code}")
public List<Town> three(@PathVariable("code")String code){
LambdaUpdateWrapper<Town> wrapper=new LambdaUpdateWrapper<>();
wrapper.eq(Town::getCitycode,code);
List<Town> cityByCityCode = townService.list(wrapper);
return cityByCityCode;
}
}
这里用mp查询,根据城市编码查询区县,@ResponseBody把对象返回
每次点击清空上一次查询结果
$("#tCode").empty()
成功返回里面调用函数,遍历新增节点,把名字放在节点里
for (let i = 0; i <data.length ; i++) {
$("#tCode").append("<option >"+data[i].name+"</option>")
}