JS 實現下拉框 省市區三級聯動

今天剛好做了以下表單驗證，發現網上比較基礎的三級聯動教程並不多，所以我出此以本。

效果如圖：

 

HTML代碼如下：

　　　　　　　　　　　　<select name="province" onchange="getCity()">
                        <option value="0">所在省</option>
                        <option value="直轄市">直轄市</option>
                        <option value="廣東省">廣東省</option>
                        <option value="江蘇省">江蘇省</option>
                        <option value="福建省">福建省</option>    
                    </select>
                    <select name="city" onchange="getDistrict()">
                        <option value="0">所在市</option>
                    </select>
                    <select class="clear-Mar" name="district">
                        <option value="0">所在區</option>
                    </select>

 

JS代碼如下：

var city=[
   ["北京市","天津市","上海市","重慶市"],
   ["廣州市","深圳市","珠海市","東莞市"],
   ["南京市","蘇州市","南通市","常州市"],
   ["福州市","廈門市","莆田市","泉州市"]
   ];
var district=[
    [
        ["東城區","西城區","宣武區"],["和平區","紅橋區","塘沽區"],["楊浦區","徐匯區"],["萬州區","涪陵區"]
    ],
    [
        ["天河區","海珠區","白雲區","番禺區"],["南山區","寶安區","福田區"],["香洲區","斗門區","金灣區"],["東城區","莞城區","萬江區"]
    ],
    [
        ['玄武區','白下區','秦淮區','建鄴區'],['滄浪區','平江區','金閶區','虎丘區'],['崇川區','港閘區','海安縣','如東縣'],['天寧區','鍾樓區','新北區']
    ],
    [
        ['鼓樓區','台江區','倉山區','馬尾區'],['思明區','海滄區','湖里區','集美區'],['城廂區','涵江區','荔城區','秀嶼區'],['鯉城區','豐澤區','洛江區','泉港區']
    ]
];
function getCity(){
    //獲得省份下拉框的對象
    var sltProvince=document.forms[0].province;
    //獲得城市下拉框的對象
    var sltCity=document.forms[0].city;     
    //獲得市區下拉框的對象
    var sltDistrict=document.forms[0].district;
    //得到對應省份的城市數組
    var provinceCity=city[sltProvince.selectedIndex - 1];  
    //清空城市下拉框，僅留提示選項
    sltCity.length=1;
      sltDistrict.length=1;
    //將城市數組中的值填充到城市下拉框中
    for(var i=0;i<provinceCity.length;i++){
       sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
    }
}
function getDistrict() {
    var sltProvince=document.forms[0].province;
     //獲得城市下拉框的對象
    var sltCity=document.forms[0].city;     
    //獲得市區下拉框的對象
    var sltDistrict=document.forms[0].district;
    //得到對應城市的市區數組
    var cityDistrict=district[sltProvince.selectedIndex - 1][sltCity.selectedIndex - 1];
    //清空城市下拉框，僅留提示選項
    sltDistrict.length=1;
    //將市區數組中的值填充到市區下拉框中
    for(var i=0;i<cityDistrict.length;i++){
       sltDistrict[i+1]=new Option(cityDistrict[i],cityDistrict[i]);
    }
}

 

CSS不是重點就不給出了，如有疑問可以在下方評論......