三級聯動：js實現淘寶地址更改

在淘寶購物的時候，我們經常會遇到收穫地址的選擇，當省份發生改變時，城市，鄉鎮會隨之發生改變。
這個三級聯動的效果我們可以通過js來實現。
在寫這個案例時，博主將地址的信息存儲在了一個json對象中，並把json對象存在了一個js文件中，存儲地址信息的js文件可以去博主的資源中下載哦~~

效果圖：

html及css代碼如下：

<!-- css代碼-->
<style>
        *{margin: 0;padding:0;}
        .main{overflow: hidden;width:650px;margin: 100px auto;}
        select{display: inline-block;width:100px;height: 30px;line-height: 30px;margin: 10px 28px;}
        #d-s{display: inline-block;}
    </style>
  <!-- html代碼-->
<div class="main">
    <select id="provence"><option value="-1">請選擇</option></select> 省份
    <select id="city"><option value="-1">請選擇</option></select> 城市
    <div id="d-s"><select id="street"><option value="-1">請選擇</option></select> 縣區</div>
</div>

接下來，重頭戲來啦，js代碼：

<script src="js/citylist.js"></script>
<script>
    var ps = document.getElementById('provence');
    var cs = document.getElementById('city');
    var ss = document.getElementById('street');
    var ds = document.getElementById("d-s")
    var Val = '<option value="-1">請選擇</option>';

    for(var i=0;i<json.citylist.length;i++){
    //從json數組中獲取所有省、直轄市，並且添加到下拉框中
        ps.innerHTML += "<option value = "+ i + ">" + json.citylist[i].p + "</option>";
    }
    //省下拉框的改變事件
    ps.onchange = function(){
        Val = '<option value="-1">請選擇</option>';
        //這一段if-else代碼是爲了判斷是否爲直轄市，如果爲直轄市，則最後一個縣區的下拉框隱藏
        if(json.citylist[ps.value].c[0].a == undefined){
            ds.style.display='none';
        }else{
            ds.style.display='inline-block';
        }
        if(ps.value == -1){
            cs.innerHTML= Val;
        }
        for(var j=0;j<json.citylist[ps.value].c.length;j++) {
            Val += "<option value = " + j + ">" + json.citylist[ps.value].c[j].n + "</option>";
            cs.innerHTML = Val;
        }
        ss.innerHTML = '<option value="-1">請選擇</option>';
    }
//城市下拉框的改變事件
    cs.onchange = function(){
    //當選中的省不是直轄市時，纔會運行此函數
        if(ss.style.display == "inline-block"){
            Val = '<option value="-1">請選擇</option>';
            if(ps.value == -1 || cs.value== -1){
                ss.innerHTML= Val;
            }
            for(var j=0;j<json.citylist[ps.value].c[cs.value].a.length;j++){
                Val += "<option value = " + j + ">" + json.citylist[ps.value].c[cs.value].a[j].s + "</option>";
                ss.innerHTML = Val;
            }
        }
    }

博主覺得，其實這個效果搞清楚了實現原理，並不是很困難，就是因爲數據的信息量太大，所以在整理json對象中的數據時，會很頭疼，需要費點神。誰讓博主是個心細如塵的妹子（哈哈哈~）呢，這點小事自然難不倒我啦~