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;
    }

七、 简单效果展示