1.定義三個(gè)選擇標(biāo)簽 增加一個(gè)默認(rèn)選項(xiàng)請選擇
<select id="province">
<option>--請選擇--</option>
</select>
<select id="city">
<option>--請選擇--</option>
</select>
<select id="county">
<option>--請選擇--</option>
</select>
2.定義省市縣三個(gè)數(shù)組存儲(chǔ)數(shù)據(jù) 定義p存儲(chǔ)選擇的省份
var aProvince = ["河北省", "山西省", "湖北省"];
var aCity = [
["石家莊市", "張家口市", "承德市", "秦皇島市"],
["太原市", "朔州市", "大同市", "陽泉市"],
["武漢市", "孝感市", "宜昌市", "襄陽市"]
];
var aCountry = [
[['00','01','02','03'],['01','00','00','00'],['02','00','00','00'], ['03','00','00','00']],
[['10','00','00','00'],['11','00','00','00'],['12','00','00','00'],['13','00','00','00']],
[['20','00','00','00'],['21','00','00','00'],['22','00','00','00'],['23','00','00','00']]
];
var p;
3.在$(function() {})方法里面做賦值操作
$(function() {
//給省份賦值
for(var i = 0; i < aProvince.length; i++) {
$("#province").append("<option>" + aProvince[i] + "</option>");
}
//省份改變執(zhí)行
$("#province").change(function() {
//獲取到省份選中的下標(biāo)
var index = $(this).children("option:selected").index();
//去除默認(rèn)
p = index - 1;
//移除除了下標(biāo)為0的內(nèi)容
$("#city").children().not(":eq(0)").remove();
//便利給市份賦值
for(var j = 0; j < aCity.length; j++) {
$("#city").append("<option>" + aCity[p][j] + "</option>")
}
})
//市份改變執(zhí)行
$("#city").change(function(){
//獲取選中的下標(biāo)
var index = $(this).children("option:selected").index();
//獲取縣的數(shù)據(jù)
var aa = aCountry[p][index - 1];
//移除除默認(rèn)選中外的所有市的數(shù)據(jù)
$("#county").children().not(":eq(0)").remove();
//給縣級數(shù)據(jù)賦值
for (var i = 0; i < aa.length; i++) {
$("#county").append("<option>"+ aa[i] +"</option>")
}
})
})