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

缺乏、安全感 2022-06-03 02:51 223阅读 0赞

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

一、实现思路  
1、请求 url：/province ， 通过 Model 默认加载省份数据，  
2、用change 事件监听province的变换，触发ajax事件，加载城市数据  
3、加载区县数据，同理 2  
4、数据源以国家统计局数据为基准。 [最新县及县以上行政区划代码（截止2016年7月31日）][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;
        }

七、 简单效果展示  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

![这里写图片描述][SouthEast 2]

[2016_7_31]: http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201703/t20170310_1471429.html
[SouthEast]: /images/20220603/48208b37916d483e965595bb380b21bb.png
[SouthEast 1]: /images/20220603/151d8d5135644cc389f5623827d001b8.png
[SouthEast 2]: /images/20220603/4060e9000adb4e5e90b0867b85ada94c.png