您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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

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

  1. 在select上面的省和市加上id,可以获取对应的id
<li> 所属区域:
        <select id="province">
        </select>
        <select id="city">
        </select>
      </li>
  1. 先获取所有的省和市,每一个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);
      }
    });
  1. 根据省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>");
              }
          }
      });
    });
  });
  1. 以下是控制层的代码:
@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;
    }

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


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进