使用springboot和thymeleaf在html中显示省市二级联动

1. 在select上面的省和市加上id，可以获取对应的id

 所属区域：
        
        
        
        
      

2. 先获取所有的省和市，每一个option里面加上value用来获取省id，继而用来查询所有的市

$(function () {
    // 获取所有省
    $.get("../storage/provinceList",function (data) {
        console.log(data);
      if(data != null){
        var str = '请选择省份n';
          for (var i = 0;i < data.length;i++) {
          str += ''+ data[i].pname +'n';
        }
        $("#province").html(str);
      }
    });
    // 获取所有市
    $.get("../storage/cityList",function (data) {
        console.log(data);
      if(data != null){
        var str = '请选择城市n';
        for (var i = 0;i < data.length;i++) {
          str +=  ''+ data[i].cname +'n';
        }
        $("#city").html(str);
      }
    });

3. 根据省id获取对应的所有市

// 根据省id获取对应的市
    $("#province").change(function () {
    // 这里的val()后面的一对小括号别忘了，我就是因为这个找了很久的bug
      var id = $("#province").val();
      if(id == ""){
          return;
      }
      $.ajax({
          type:"get",
          url:"../storage/city/" + id,
          success: function (data) {
              console.log(data);
              var city = $("#city").empty();
              city.append('请选择城市');
              for (let i = 0; i < data.length; i++) {
                  city.append("" + data[i].cname + "");
              }
          }
      });
    });
  });

4. 以下是控制层的代码：

@ResponseBody
	// 获取所有的市
    @GetMapping("/provinceList")
    public List provinceList(){
        List provinceList = warehouseService.getProvinceList();
        return provinceList;
    }
	// 通过REST风格根据省id获取对应所有的市
    @ResponseBody
    @GetMapping("/city/{id}")
    public List city(@PathVariable("id") Integer id){
        List city = warehouseService.getCityById(id);
        return city;
    }
	// 获取所有的市
    @ResponseBody
    @GetMapping("/cityList")
    public List cityList(){
        List cityList = warehouseService.getCityList();
        return cityList;
    }

作者小菜鸡一枚，如有错误请指正，欢迎大家讨论！！！