jQuery實現 三級聯動--省市縣
阿新 • • 發佈:2018-06-06
jQuery1.遍歷省 在省的一列追加遍歷出來的省
2.遍歷市
2.1 根據省的索引來選擇對應的市
2.2 清空上一回選擇的市和縣
2.3 如果省的索引大於 0 ,使其為 0 ,才能正常的遍歷市,否則不能正常匹配
2.4 在市的一列後邊追加遍歷出來的市
3.遍歷縣
3.1 根據市的索引來選擇對應的縣
3.2 清空上一回選擇的縣
3.3 如果市的索引大於 0 ,使其為 0 ,才能正常的遍歷縣,否則不能正常匹配
3.4 在縣的一列後邊追加遍歷出來的縣 遍歷方法同省
2.遍歷市
2.1 根據省的索引來選擇對應的市
2.2 清空上一回選擇的市和縣
2.3 如果省的索引大於 0 ,使其為 0 ,才能正常的遍歷市,否則不能正常匹配
2.4 在市的一列後邊追加遍歷出來的市
3.遍歷縣
3.1 根據市的索引來選擇對應的縣
3.2 清空上一回選擇的縣
3.3 如果市的索引大於 0 ,使其為 0 ,才能正常的遍歷縣,否則不能正常匹配
3.4 在縣的一列後邊追加遍歷出來的縣
現有三個省的數組
var aProvince = ["河北省","山西省","湖北省"]; var aCity = [ ["石家莊市", "張家口市", "承德市", "秦皇島市"], ["太原市", "朔州市", "大同市", "陽泉市"], ["武漢市", "孝感市", "宜昌市", "襄陽市"] ]; var aCounty = [ [ ["無極縣", "趙縣", "欒城縣"], ["沽源縣", "尚義縣", "陽原縣"], ["平泉縣", "灤平縣", "隆化縣"], ["撫寧縣", "盧龍縣", "昌黎縣"] ], [ ["清徐縣", "陽曲縣", "婁煩縣"], ["山陰縣", "應縣", "右玉縣"], ["左雲縣", "陽高縣", "天鎮縣"], ["盂縣", "平定縣", "礦區"] ], [ ["武昌區", "洪山區", "東湖新區"], ["雲夢縣", "大悟縣", "應城市"], ["秭歸縣", "遠安縣", "枝江市"], ["棗陽市", "老河口市", "谷城縣"] ] ];
對應的html代碼:
<select id="selProvince"> <option>--請選擇--</option> </select> <select id="selCity"> <option>--請選擇--</option> </select> <select id="selCounty"> <option>--請選擇--</option> </select>
第一步、遍歷省(最簡單)
先求出數組的長度,否則無法遍歷。
再在select元素裏追加子元素option,使用append
for(var i=0; i<aProvince.length; i++){
$("#selProvince").append("<option>"+aProvince[i]+"</option>");
}
第二步、根據省遍歷對應的省的市,如選擇河北省,則不會出現湖北省的市,只會出現河北省的市,選擇湖北同樣只會出現湖北的市。
先清除上回出現過的,如果沒有選擇過,就清除0唄,不清除的話會在上回出現的基礎上累加。
再獲取省對應的索引值,如河北省應當是 1,但到我們定義的數組裏是 0 ,我們讓索引值 -1 ,即清除掉“--請選擇--”的索引,讓河北省的索引為 0 ,這樣才可以遍歷對應的市。
//根據省遍歷市
$("#selProvince").change(function(){ //點擊xx省的時候觸發時事件
$("#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]; //讓市的索引從 當前省的索引-1開始遍歷
for(var j=0; j<aCity.length; j++){
$("#selCity").append("<option>"+ac[j]+"</option>");
}
}
});
第三步、同第二步
//根據市遍歷縣
$("#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]; //根據省找到市,在根據市找打縣,再遍歷
for(var j=0; j<aCounty.length; j++) {
$("#selCounty").append("<option>"+ac[j]+"</option>");
}
}
});
源碼下載地址:鏈接:https://pan.baidu.com/s/1lxo42UyIQmudwBM-C6jtWA 密碼:eu04
如果連接失效,可以聯系我:huamuxiong_2018#163.com (請自動將#轉換成@)
jQuery實現 三級聯動--省市縣