記錄地區三級聯動查詢

先是前台展示效果:

點擊省份時,城市和區域也變化

點擊城市時,區域發生變化

代碼:以新增地址作為例子

  @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>