jQuery实现省市县三级联动

之前用angular写过三级联动，今天打算用jQuery再实现一遍。这也是在做的公司的项目的一个桥段。

我先把html代码贴出来

<div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title"><i class="fa fa-book"></i> 地址</h4>
                            </div>
                            <div class="panel-body">
                                <fieldset id="address" class="required">
                                    <div class="form-group required">
                                        <label for="input-payment-province" class="control-label">省</label>
                                        <select class="form-control" id="input-payment-province" name="province_id">
                                        </select>
                                    </div>
                                    <div class="form-group required">
                                        <label for="input-payment-city" class="control-label">市/区</label>
                                        <select class="form-control" id="input-payment-city" name="city_id">
                                        </select>
                                    </div>
                                    <div class="form-group required">
                                        <label for="input-payment-county" class="control-label">区/县</label>
                                        <select class="form-control" id="input-payment-county" name="county_id">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="input-payment-address-1" class="control-label">地址</label>
                                        <input type="text" class="form-control" id="input-payment-address-1" placeholder="地址" value="" name="address_1" disabled="disabled">
                                    </div>
                                    <div class="form-group required">
                                        <label for="input-payment-address-2" class="control-label">详细地址</label>
                                        <input type="text" class="form-control" id="input-payment-address-2" placeholder="详细地址" value="" name="address_2">
                                    </div>
                                    <div class="form-group">
                                        <label for="input-payment-company" class="control-label">公司</label>
                                        <input type="text" class="form-control" id="input-payment-company" placeholder="公司" value="" name="company">
                                    </div>
                                    <!--<div class="checkbox">-->
                                        <!--<label>-->
                                            <!--<input type="checkbox" checked="checked" value="1" name="shipping_address">-->
                                            <!--我的递送和帐单地址是相同的</label>-->
                                    <!--</div>-->
                                    <div class="form-group">
                                        <span class="label">&nbsp;</span>
                                        <div class="fl">
                                            <a href="#none" class="btn-1" onclick="save_Consignee()"><span id="saveConsigneeTitleDiv">保存收货人信息</span></a>
                                            <div class="loading loading-1" style="display:none"><b></b>正在提交信息，请等待！</div>
                                        </div>
                                        <div style="display:none"><input id="consignee_form_reset" name="" type="reset"></div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>

下面是jQuery代码     用到了ajax的网络请求和数组去重（后来修改了后端的返回的数据，去重的操作可以省去）

<script type="text/javascript">
    $(function(){
        var province_name = $("#input-payment-province"),
            city_name = $("#input-payment-city"),
            county_name = $("#input-payment-county"),
            address_text = $("#input-payment-address-1"),
            preProvince = "<option value=\"\">---选择省---</option>",
	        preCity = "<option value=\"\">---选择市---</option>",
	        preCounty = "<option value=\"\">---选择区---</option>";
	        // 初始化
	        province_name.html(preProvince);
	        city_name.html(preCity);
	        county_name.html(preCounty);
            // 加载文件
	        $.ajax({
	            url:'/mall/address/province',
	            dataType: 'json',
	            contentType: 'application/json',
	            type:'GET',
	            success: func_getProvince
	        });
	         // 获取省成功时的回调
	        function func_getProvince(res) {
	            //console.log("res =",res);
	            if(res.status == 80200){
	                for(var i = 0 ,len = res.data.length; i < len; i++){
	                    province_name.append("<option value=" + i + ">"
                            + res.data[i].province + "</option>");
	                }
	            }
	        }
	        // 省的下拉事件
	        province_name.change(function(){
                if(province_name.val() != ""){
                    city_name.html(preCity);
                    county_name.html(preCounty);
                    var proOption = $("#input-payment-province option:selected").text();
                    //console.log("proOption = ", proOption);
                    // 加载市的数据
                     $.ajax({
                        url: '/mall/address/cities/province/'+ proOption,
                        dataType: 'json',
                        contentType: 'application/json',
                        type:'GET',
                        success: func_getCity
                    });
                }
	        });
	        // 获取城市成功时的回调
	        function func_getCity(res){
                //console.log("cityres =" ,res);
                let tempArr = [];
                if(res.status == 80200){
                     for(var i = 0 ,len = res.data.length; i < len; i++){
                        //console.log(res.data[i].city,typeof res.data[i].city);
                        tempArr.push(res.data[i].city);
	                }
	                for(var j = 0,len = tempArr.unique().length; j < len ; j++){
	                    city_name.append("<option value=" + i + ">"
                            + tempArr[j] + "</option>");
	                }
                }
	        }
	        // 市的下拉事件
	        city_name.change(function(){
	            if(city_name.val() != ""){
                    county_name.html(preCounty);
                    var proOption = $("#input-payment-province option:selected").text(),
                        citOption = $("#input-payment-city option:selected").text();
                     //console.log("proOption = ", proOption);
                     //console.log("citOption = ", citOption);
                    // 加载县的数据
                     $.ajax({
                        url: '/mall/address/district/province/'+ proOption + '/city/' + citOption,
                        dataType: 'json',
                        contentType: 'application/json',
                        type:'GET',
                        success: func_getCounty
                    });
	            }
	        });
	        // 获取县的成功回调
	        function func_getCounty(res){
	            //console.log("countyres = ",res);
	             let tempArr = [];
                if(res.status == 80200){
                     for(var i = 0 ,len = res.data.length; i < len; i++){
                        //console.log(res.data[i].district,typeof res.data[i].district);
                        tempArr.push(res.data[i].district);
	                }
	                for(var j = 0,len = tempArr.unique().length; j < len ; j++){
	                    county_name.append("<option value=" + i + ">"
                            + tempArr[j] + "</option>");
	                }
                }
	        }
	        // 县的下拉事件
	        county_name.change(function(){
	            if(county_name.val() !=""){
	            var proOption = $("#input-payment-province option:selected").text(),
                        citOption = $("#input-payment-city option:selected").text(),
                        couOption = $("#input-payment-county option:selected").text();
                    console.log(proOption ,citOption ,couOption);
                    address_text.val(proOption + "（省/市）" + citOption + "(市/区)" +  couOption);
	            }
	        });
            // 原型链上的数组去重
            Array.prototype.unique = function(){
                var temp = {},
                    arr = [],
                    len = this.length;
                for (var i = 0; i < len; i++) {
                    if(!temp[this[i]]){
                        // 任意赋值
                        temp[this[i]] = 'ydj';
                        arr.push(this[i]);
                    }
                }
                return arr;
            }
    });
</script>

效果图

后台返回的是json数据，数据库设计结构如下