distpicker三級關聯，動态改變省市資訊

一、引入3個js檔案

　　<script type="text/javascript" src="js/distpicker.data.js"></script>

　　<script type="text/javascript" src="js/distpicker.js"></script>

　　<script type="text/javascript" src="js/main.js"></script>

二、頁面展示

代碼：

<div class="form-group">
                            <label class="col-lg-1 col-sm-1 control-label">通訊位址<font color="red">*</font></label>
                            <div class="col-lg-4 distpicker" data-toggle="distpicker">
                                <select id="province" name="province" data-province="---- 選擇省 ----"></select>
                                <select id="city" name="city" data-city="---- 選擇市 ----"></select>
                                <select id="district" name="district" data-district="---- 選擇區 ----"></select>
                            </div>
                            <label class="col-lg-1 col-sm-1 control-label">通訊位址補充資訊<font color="red">*</font></label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" id="addressExtra" placeholder="住址" value="${(empList.address_extra)!''}" name="addressExtra" >
                            </div>
                        </div>      

初始化選項框的資料為選擇省市區

$('.distpicker').distpicker('reset', true);
$('.distpicker1').distpicker('reset', true);      

三、動态擷取資料的三級關聯

代碼：

var province = "${(empList.province)!''}";
        var city = "${(empList.city)!''}";
        var district = "${(empList.district)!''}";
   
        if(province!=null){
            var numbers = $("#province").find("option"); //擷取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == province) {
                    $(numbers[j]).attr("selected", "selected");
                    $('.distpicker').distpicker('output','city');//收到省的資料，市裡面擷取到這個省的所有市的名稱
                }
            }
        }
        if(city!=null){
            var numbers = $("#city").find("option"); //擷取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == city) {
                    $(numbers[j]).attr("selected", "selected");
                    $('.distpicker').distpicker('output','district');
                }
            }
        }
        if(district!=null){
            var numbers = $("#district").find("option"); //擷取select下拉框的所有值
            for (var j = 1; j < numbers.length; j++) {
                if ($(numbers[j]).val() == district) {
                    $(numbers[j]).attr("selected", "selected");
                }
            }
        }      

轉載于:https://www.cnblogs.com/NCL--/p/9305026.html