jQuery實(shí)現(xiàn) 三級聯(lián)動--省市縣

1.遍歷省 在省的一列追加遍歷出來的省
2.遍歷市
2.1 根據(jù)省的索引來選擇對應(yīng)的市
2.2 清空上一回選擇的市和縣
2.3 如果省的索引大于 0 ，使其為 0 ，才能正常的遍歷市，否則不能正常匹配
2.4 在市的一列后邊追加遍歷出來的市
3.遍歷縣
3.1 根據(jù)市的索引來選擇對應(yīng)的縣
3.2 清空上一回選擇的縣
3.3 如果市的索引大于 0 ，使其為 0 ，才能正常的遍歷縣，否則不能正常匹配
3.4 在縣的一列后邊追加遍歷出來的縣

現(xiàn)有三個(gè)省的數(shù)組

var aProvince = ["河北省","山西省","湖北省"];
var aCity = [
    ["石家莊市", "張家口市", "承德市", "秦皇島市"],
    ["太原市", "朔州市", "大同市", "陽泉市"],
    ["武漢市", "孝感市", "宜昌市", "襄陽市"]
];
var aCounty = [
    [
        ["無極縣", "趙縣", "欒城縣"],
        ["沽源縣", "尚義縣", "陽原縣"],
        ["平泉縣", "灤平縣", "隆化縣"], 
        ["撫寧縣", "盧龍縣", "昌黎縣"]
    ],
    [
        ["清徐縣", "陽曲縣", "婁煩縣"], 
        ["山陰縣", "應(yīng)縣", "右玉縣"], 
        ["左云縣", "陽高縣", "天鎮(zhèn)縣"],
        ["盂縣", "平定縣", "礦區(qū)"]
    ],
    [
        ["武昌區(qū)", "洪山區(qū)", "東湖新區(qū)"], 
        ["云夢縣", "大悟縣", "應(yīng)城市"],
        ["秭歸縣", "遠(yuǎn)安縣", "枝江市"],
        ["棗陽市", "老河口市", "谷城縣"]
    ]
];

對應(yīng)的html代碼：

<select id="selProvince">
            <option>--請選擇--</option>
        </select>
        <select id="selCity">
            <option>--請選擇--</option>
        </select>
        <select id="selCounty">
            <option>--請選擇--</option>
        </select>

第一步、遍歷省（最簡單）
先求出數(shù)組的長度，否則無法遍歷。
再在select元素里追加子元素option，使用append

for(var i=0; i<aProvince.length; i++){
        $("#selProvince").append("<option>"+aProvince[i]+"</option>");
    }

第二步、根據(jù)省遍歷對應(yīng)的省的市，如選擇河北省，則不會出現(xiàn)湖北省的市，只會出現(xiàn)河北省的市，選擇湖北同樣只會出現(xiàn)湖北的市。
先清除上回出現(xiàn)過的，如果沒有選擇過，就清除0唄，不清除的話會在上回出現(xiàn)的基礎(chǔ)上累加。
再獲取省對應(yīng)的索引值，如河北省應(yīng)當(dāng)是 1，但到我們定義的數(shù)組里是 0 ，我們讓索引值 -1 ，即清除掉“--請選擇--”的索引，讓河北省的索引為 0 ，這樣才可以遍歷對應(yīng)的市。
遍歷方法同省

//根據(jù)省遍歷市
    $("#selProvince").change(function(){  //點(diǎn)擊xx省的時(shí)候觸發(fā)時(shí)事件
        $("#selCity").children("option").not(":eq(0)").remove(); //清空市
        $("#selCounty").children("option").not(":eq(0)").remove(); //清空縣
        num1 = parseInt($(this).children("option:selected").index());  //獲取省索引
        if(num1 > 0){
            var ac =  aCity[num1-1];  //讓市的索引從 當(dāng)前省的索引-1開始遍歷
            for(var j=0; j<aCity.length; j++){
                $("#selCity").append("<option>"+ac[j]+"</option>");
            }
        }
    });

第三步、同第二步

//根據(jù)市遍歷縣
    $("#selCity").change(function(){
        $("#selCounty").children("option").not(":eq(0)").remove();  //只需清除縣，
        num2 = parseInt($(this).children("option:selected").index());  //獲取市的索引
        if(num2 > 0) {
            var ac = aCounty[num1-1][num2-1];  //根據(jù)省找到市，在根據(jù)市找打縣，再遍歷
            for(var j=0; j<aCounty.length; j++) {
                $("#selCounty").append("<option>"+ac[j]+"</option>");
            }
        }
    });

×××地址：鏈接：https://pan.baidu.com/s/1lxo42UyIQmudwBM-C6jtWA 密碼：eu04
如果連接失效，可以聯(lián)系我：huamuxiong_2018#163.com （請自動將#轉(zhuǎn)換成@）