记录地区三级联动查询

先是前台展示效果:

点击省份时,城市和区域也变化

点击城市时,区域发生变化

代码:以新增地址作为例子

  @RequestMapping("/addAddress")
    public String addAddress(HttpServletRequest request, ModelMap modelMap, HttpServletResponse response) {
        //查出所有省份
        List<Map<String, Object>> provinceList = addressService.getAllRegion();
        modelMap.put("provinceList", provinceList);
        return "wx/me/my_details_address_editor";
    }

sql语句和数据库数据:

 <select id="getAllRegion" resultType="java.util.Map">
               select id as id, area_name as name from eb_area where level=1
    </select>

 

 

查询出所有省份在前台页面展示,此时页面中只有省份可以选择

 前台代码:

            <form action="<%=basePath%>wx/me/saveAddress" method="POST" id="addAddressForm">
                <div class="myDtl_cnt_list">
                    <div class="g-line g-clear">
                        <h5 class="fl">姓名</h5>

                        <div class="fr">
                            <input class="myDtlIdy_input" style="" type="text" placeholder="请输入您的姓名" name="aName">
                        </div>
                    </div>
                    <div class="g-line g-clear">
                        <h5 class="fl">手机号码</h5>

                        <div class="fr">
                            <input class="myDtlIdy_input" style="" type="text" placeholder="请输入您的手机号码" name="aPhone">
                        </div>
                    </div>
                    <div class="g-line g-clear">
                        <h5 class="fl">所在地区</h5>

                        <div class="fr">
                            <label>
                                <select style="line-height:1rem;height:2rem;width:5rem;border:none;" id="province2"
                                        name="provinceId">
                                    <option>选择省份</option>
                                    <c:forEach items="${provinceList}" var="province">
                                        <option value="${province.id}">${province.name}</option>
                                    </c:forEach>
                                    <option>选择省份</option>
                                </select>


                                <select style="line-height:1rem;height:2rem;width:5rem;border:none;" id="city2"
                                        name="cityId">
                                    <option value="">选择城市</option>
                                </select>


                                <select style="line-height:1rem;height:2rem;width:5rem;border:none;" id="area2"
                                        name="areaId">
                                    <option value="">选择区域</option>
                                </select>

                            </label>
                        </div>
                    </div>
                    <label class="ml-row19 g-mt1">
                        <textarea style="width:19rem;" name="aAddress" id="aAddress"></textarea>
                    </label>
                </div>
                <div class="myDtlALL_ok"><a class="lgi_btn g-btn-crimson" href="javascript:void(0);"
                                            id="addAddress">保存</a></div>
            </form>
    

<script type="text/javascript">
    
    $("#addAddress").click(function () {
        $("#addAddressForm").submit();
    })
    //所在区域联动列表

  
    setup("province2", "city2", "area2");//下面有加载的js代码,定义一个通用方法,用于联动查询

    function setup(p, c, a) {
        $("#" + p + "").click(function () {
            province(p, c, a)　　//点击省份时联动查询省份,城市,区域方法
        });
        $("#" + c + "").click(function () {
            city(c, a);　　　　　　//点击城市的时候联动查询城市,区域的方法
        });

    }

    function province(p, c, a) {
        $.ajax({
            url: "<%=basePath%>wx/me/getCityByProvinceId?id=" + $("#" + p + "").val(),
            type: "POST",
            dataType: 'json',
            success: function (data) {
                $("#" + c + "").empty(); //清空下拉列表
                $.each($.parseJSON(data), function (i, json) {　　//$.parseJSON用于格式化json数据
                    $("#" + c + "").append(" <option value='" + json.id + "'>" + json.name + "</option>");//增加城市的数据
                });
                city(c, a);　　
            }
        });
    }
    function city(c, a) {
        $.ajax({
            url: "<%=basePath%>wx/me/getAreaByCityId?id=" + $("#" + c + "").val(),
            type: "POST",
            dataType: 'json',
            success: function (data) {
                $("#" + a + "").empty(); //清空下拉列表
                $.each($.parseJSON(data), function (i, item) {
                    $("#" + a + "").append(" <option value='" + item.id + "'>" + item.name + "</option>");//增加区域的数据
                });
            }
        });

    }


</script>

联动查询的后台代码:

    @RequestMapping("/getCityByProvinceId")
    @ResponseBody
    public String getCityByProvinceId(Integer id, HttpServletResponse response) {
        //根据省份id查询城市
        List<Map<String, Object>> cityList = addressService.getAllCitys(id);
        String json = JSON.toJSONString(cityList);
        return json;
    }

    @RequestMapping("/getAreaByCityId")
    @ResponseBody
    public String getAreaByCityId(Integer id, HttpServletResponse response) {
        //根据城市id查询地区
        List<Map<String, Object>> areaList = addressService.getAreaByCityId(id);
        String json = JSON.toJSONString(areaList);
        return json;
    }

联动查询的sql语句:

  <select id="getAllCitys" resultType="java.util.Map" parameterType="java.lang.Integer">
               select id as id,area_name as  name from eb_area where level=2 and parent_id =#{id}
    </select>
    <select id="getAreaByCityId" resultType="java.util.Map" parameterType="java.lang.Integer">
               select id as id,area_name as  name from eb_area where level=3 and parent_id =#{id}
    </select>