SpringMVC，ajax实现省市区三级联动

SpringMVC，ajax实现省市区三级联动

一、实现思路
1、请求 url：/province ， 通过 Model 默认加载省份数据，
2、用change 事件监听province的变换，触发ajax事件，加载城市数据
3、加载区县数据，同理 2
4、数据源以国家统计局数据为基准。 最新县及县以上行政区划代码（截止2016年7月31日） 本人已经整理好2016年7月31日数据，有需要的朋友私信联系。

二、核心 pojo

public class Areas {    private String id; //区域id    private String parentId;//区域父id    private String name;//区域名称    private String code;//区域编号    private String type; // 区域类型（1：国家；2：省份、直辖市；3：地市；4：区县）}

三、jsp 页面代码

 <%-- ====== 省市区==== 三级级联 --%>     <h1>        <select name="province" id="province">            <option>--请选择--</option>            <c:forEach var="province" items="${provinceList }">                <option value="${province.id }">${province.name}</option>            </c:forEach>        </select>        <select name="city" id="city">                <option value="">--请选择--</option>        </select>        <select name="county" id="county">                <option value="">--请选择--</option>        </select>     </h1>

四、jsp 页面 js 代码

    // 1. province change        $("#province").change(function(){            var provinceId= $("#province").val(); // 获取选中的值            var provinceName= $("#province").find("option:selected").text();//获取选中的文本内容            //通过 省份 id ，获取省份下面的城市            //1. 清空 原有的 城市和区县内容            $("#city").empty();            $.get("${pageContext.request.contextPath}/cityJson",{"id":provinceId},function(data){                $("#county").empty();//清空城市下面的区县                $("#city").append("<option value=''>"+'--请选择--'+"</option>");                $("#county").append("<option value=''>"+'--请选择--'+"</option>");                $.each(data,function(k,v){                    var _ele="<option value='"+v.id+"'>"+v.name+"</option>";                    $("#city").append(_ele);                });            })        });

// 2. city change$("#city").change(function(){    var cityId=$("#city").val();    var cityName=$("#city").find("option:selected").text();    $.get("${pageContext.request.contextPath}/cityJson",{"id":cityId},function(data){        // 清空 城市下面的区县        $("#county").empty();        $("#county").append("<option value=''>"+'--请选择--'+"</option>");        $.each(data,function(k,v){            var _ele="<option value='"+v.id+"'>"+v.name+"</option>";            $("#county").append(_ele);        });    });});

五、初始加载省份数据 url : /province

    @RequestMapping(value="/province")    public String  province(String type,Model model){        if(StringUtils.isBlank(type)){            type="2"; //         }        List<Area> provinceList = areaService.getAreaListByType(type);//省份        model.addAttribute("provinceList", provinceList);        return "/modules/auto";    }

六、根据 provinceId 获取省份下的 cityList 和 根据 cityId 获取 城市下的 countyList

    @RequestMapping(value="/cityJson")    @ResponseBody    public List<Area>  cityJson(String id){        List<Area> cityList= areaService.getAreaListByParentId(id);        return provinceList;    }

七、 简单效果展示