Web頁面實現三級聯動
最近專案裡面有一個功能需要使用三級聯動來實現，但是專案中又沒有很好的 demo 來實現這個功能，於是乎自己手敲了一個簡單的三級聯動的程式碼，記錄一下。時間倉促，程式碼中還有很多地方可以優化。

 <div class="row">
     <div class="col-sm-6">
         <select id="province" name="province"  class="chosen-select form-control m-b" tabindex="1">
             <option>===請選擇===</option>
         </select>
     </div>
     <span style="color: red; font-size: 23px">*</span>
     <small>[ 省 ]</small>
 </div>
 <br>

 <div class="row">
     <div class="col-sm-6">
         <select id="city" name="city"  class="chosen-select form-control m-b" tabindex="1">
             <option>===請選擇===</option>
         </select>
     </div>
     <span style="color: red; font-size: 23px">*</span>
     <small>[ 市 ]</small>
 </div>
 <br>

 <div class="row">
     <div class="col-sm-6">
         <select id="district" name="district" class="chosen-select form-control m-b" tabindex="1">
             <option>===請選擇===</option>
         </select>
     </div>
     <span style="color: red; font-size: 23px">*</span>
     <small>[ 區 ]</small>
 </div>
 <br>
<script type="text/javascript">

    var province_id = '1000';
    var city_id ='1100';
    var district_id = '1110';

    // 初始化省
    initAddress();

    function initAddress() {
        $.ajax({
            type:'GET',
            url:'${contextPath}/test/get_province',
            success:function(data) {
                $.each(data.data, function(key, value) {
                    $("#province").append("<option value='"+key+"'>" + value + "</option>");
                });

                //回顯資料
                if (province_id != null) {
                    $("#province option").each(function () {
                        if ($(this).val() == province_id){
                            $(this).attr("selected", true);
                            getCity(province_id)
                        }
                    })
                }
            }
        });
    }

    function getCity(province_id) {
        $("#city").find("option").remove();
        $.ajax({
            type:'GET',
            url:'${contextPath}/test/get_city',
            data:{
                province_id:province_id
            },
            success:function(data) {
                $("#city").append("<option value=''>" + '===請選擇===' + "</option>");
                $.each(data.data, function(key, value) {
                    $("#city").append("<option value='"+key+"'>" + value + "</option>");
                });

                //回顯資料
                if (city_id != null) {
                    $("#city option").each(function () {
                        if ($(this).val() == city_id){
                            $(this).attr("selected", true);
                            getDistrict(city_id)
                        }
                    })
                }
            }
        });
    }

    function getDistrict(city_id) {
        $("#district").find("option").remove();
        $.ajax({
            type:'GET',
            url:'${contextPath}/test/get_district',
            data:{
                city_id:city_id
            },
            success:function(data) {
                $("#district").append("<option value=''>" + '===請選擇===' + "</option>");
                $.each(data.data, function(key, value) {
                    $("#district").append("<option value='"+key+"'>" + value + "</option>");
                });

                //回顯資料
                if (district_id != null) {
                    $("#district option").each(function () {
                        if ($(this).val() == district_id)
                            $(this).attr("selected", true);
                    })
                }
            }
        });
    }

    //change事件監聽province改變，獲取該省份下面的市
    $("#province").change(function() {
        var province_id = $("#province option:selected").val();
        getCity(province_id);
        getDistrict(null);
    });

    //change事件監聽city改變，獲取該省份下面的市
    $("#city").change(function() {
        var city_id = $("#city option:selected").val();
        getDistrict(city_id);
    });

</script>
 

Java 後臺程式碼

    /**
     * 獲取省
     *
     * @return
     */
    @ResponseBody
    @RequestMapping("/get_province")
    public JSONResultDTO get_province() {
        Map<String, String> provinceMap = new HashMap<>(4);
        provinceMap.put("1000","江蘇省");
        provinceMap.put("2000","山東省");

        return createSuccessResult(provinceMap);
    }

    /**
     * 獲取市
     *
     * @return
     */
    @ResponseBody
    @RequestMapping("/get_city")
    public JSONResultDTO get_city(String province_id) {
        Map<String, String> provinceMap = new HashMap<>(4);

        if (province_id.equals("1000")) {
            provinceMap.put("1100", "南京市");
            provinceMap.put("1200", "無錫市");
        }

        if (province_id.equals("2000")) {
            provinceMap.put("2100", "濟南市");
            provinceMap.put("2200", "青島市");
        }

        return createSuccessResult(provinceMap);
    }

    /**
     * 獲取區
     *
     * @return
     */
    @ResponseBody
    @RequestMapping("/get_district")
    public JSONResultDTO get_district(String city_id) {
        Map<String, String> cityMap = new HashMap<>(8);

        if (city_id.equals("1100")) {
            cityMap.put("1110", "浦口區");
            cityMap.put("1120", "鼓樓區");
        }

        if (city_id.equals("1200")) {
            cityMap.put("1210", "崇安區");
            cityMap.put("1220", "濱湖區");
        }

        if (city_id.equals("2100")) {
            cityMap.put("2110", "歷下區");
            cityMap.put("2120", "市中區");
        }

        if (city_id.equals("2200")) {
            cityMap.put("2210", "市南區");
            cityMap.put("2220", "市北區");
        }

        return createSuccessResult(cityMap);
    }
 

三級聯動的關鍵程式碼就是這幾行：

    $.each(data.data, function(key, value) {
        $("#province").append("<option value='"+key+"'>" + value + "</option>");
    });

    //回顯資料
    if (province_id != null) {
        $("#province option").each(function () {
            if ($(this).val() == province_id){
                $(this).attr("selected", true);
                getCity(province_id)
            }
        })
    }
 

迴圈後臺的資料，append 到對應的下拉列表框中，然後下面迴圈下拉資料和變數比較，用於編輯頁面的資料回顯。對比後將其設定為 selected 並且呼叫下一級的查詢。

本文由個人 hexo 部落格 co2fe.com 遷移
date: 2018-10-26 09:44:19