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

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

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

<li> 所属区域：
        <select id="province">
        </select>
        <select id="city">
        </select>
      </li>

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

$(function () {
    // 获取所有省
    $.get("../storage/provinceList",function (data) {
        console.log(data);
      if(data != null){
        var str = '<option>请选择省份</option>\n';
          for (var i = 0;i < data.length;i++) {
          str += '<option value='+data[i].id+'>'+ data[i].pname +'</option>\n';
        }
        $("#province").html(str);
      }
    });
    // 获取所有市
    $.get("../storage/cityList",function (data) {
        console.log(data);
      if(data != null){
        var str = '<option>请选择城市</option>\n';
        for (var i = 0;i < data.length;i++) {
          str +=  '<option value='+data[i].pid+'>'+ data[i].cname +'</option>\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('<option>请选择城市</option>');
              for (let i = 0; i < data.length; i++) {
                  city.append("<option value='"+data[i].id+"'>" + data[i].cname + "</option>");
              }
          }
      });
    });
  });

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

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

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