省市区三级联动

省市区三级联动

我的数据表结构是按照级别，省市区都在一张表里面，由父级子级这样出来的

sql

SELECT CONCAT((SELECT b.area_name FROM area_code b WHERE b.id = a.parent_id),’ ‘,a.area_name) FROM area_code a WHERE a.id =’’ concat函数，将两个字符串拼接成一个结果，用来查询市和区的字符串拼接结果，

ajax三级联动查询，后台代码jpa查询省，省的lev=1,去查询，拿到省的id,省的id是市的parent_id，然后再得到区的                   id,controller层 @RequestMapping(value="/provinces") @ResponseBody

前端代码 js

function provinces() {
$.get("/provinces", function (data) {
for (i in data)
document.getElementById(“sel_provinces”).add(new Option(data[i].areaName, data[i].id))
})
}

function cities() {
    var selection = document.getElementById("sel_provinces");
    var index = selection.selectedIndex;
    var pId = selection.options[index].value;
        $.get("/cities?provinceId=" + pId, function (data) {
        $("#sel_cities").empty();
        $("#sel_cities").append("请输入城市");
        for (i in data)
            document.getElementById("sel_cities").add(new Option(data[i].areaName, data[i].id));
        })
}


function counties() {
    var coun = document.getElementById("sel_cities");
    var index = coun.selectedIndex;
    var cId = coun.options[index].value;
        $.get("/counties?cityId=" + cId, function (data) {
        $("#sel_counties").empty();
        $("#sel_counties").append("请输入地区");
        for (i in data)
            document.getElementById("sel_counties").add(new Option(data[i].areaName, data[i].id));
        })
  }

前端显示省市区的三个联动框

*所在地区：

							 
                                    请输入省份
                            

                            
                                    请输入城市
                            

                            
                                     请输入地区
                            

后台代码

@RequestMapping(value = “/provinces”)
@ResponseBody
public List getProvinces(){
return locationService.getProvinces();
}

    @RequestMapping(value = "/cities")
    @ResponseBody
  public List getCities(@RequestParam String provinceId){
        return locationService.getCities(provinceId);
        }

    @RequestMapping(value = "/counties")
    @ResponseBody
  public List getCounties(@RequestParam String cityId){
        return locationService.getCounties(cityId);
    }