springboot实现省市区三级联查

 进入页面什么都不选择的情况

选择第一级省份，城市下拉框自动匹配对应省份 

选择第二级城市 ，区县下拉框自动匹配对应城市

怎么实现呢，接下来看下代码

        所属省份：
    <select id="pCode" onchange="two()">
        <option selected disabled&gt;请选择</option&gt;
        <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>")
            }

代码007普通

打赏 收藏 海报 链接