HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三級聯(lián)動</title>
</head>
<body>
<form>
<select name="pro" id="">
<option value="">請選擇省份</option>
</select>
<select name="city" id="" disabled="">
<option value="">請選擇城市</option>
</select>
<select name="country" id="" disabled="">
<option value="">請選擇區(qū)縣</option>
</select>
</form>
</body>
</html>
JS部分
<script>
// var address = new Object();
var forms = document.forms[0]; //獲取forms表單節(jié)點
//創(chuàng)建省份數(shù)組
var address = new Array();
address[0] = ['湖北省','湖南省','河南省'];
//創(chuàng)建城市數(shù)組
address["0_1"] = ['武漢市','鄂州市','黃岡市']
address["0_2"] = ['長沙市','婁底市','懷化市']
address["0_3"] = ['鄭州市','洛陽市','開封市']
address["0_1_1"] = ['武昌區(qū)','漢陽區(qū)','洪山區(qū)']
address["0_1_2"] = ['鄂城區(qū)','葛店區(qū)','華容區(qū)']
address["0_1_3"] = ['黃州區(qū)','羅田區(qū)','梁子湖區(qū)']
//創(chuàng)建區(qū)縣數(shù)組
address["0_2_1"] = ['aaa','sss','ddd']
address["0_2_2"] = ['aaa','sss','ddd']
address["0_2_3"] = ['aaa','sss','ddd']
address["0_3_1"] = ['aaa','sss','ddd']
address["0_3_2"] = ['aaa','sss','ddd']
address["0_3_3"] = ['aaa','sss','ddd']
//循環(huán)遍歷 下標【0】的省份數(shù)組
for( i = 0 ; i <address[0].length; i++){
var opt = document.createElement("option");//創(chuàng)建節(jié)點
opt.innerHTML = address[0][i];//添加內(nèi)容
forms.pro.appendChild(opt);//追加對應(yīng)節(jié)點
}
//省份節(jié)點發(fā)生改變的時候觸發(fā)的方法
forms.pro.onchange = function(){
if (forms.pro.selectedIndex !=0){//判斷selectedIndex下標是否為0
forms.city.innerHTML = "<option>請選擇城市</option>"
forms.country.innerHTML = "<option>請選擇區(qū)縣</option>"
forms.city.disabled = false;// 不為0的情況下谆扎，解除城市選項的鎖定
proNum = forms.pro.selectedIndex;
for(var i = 0 ; i<address["0_"+proNum].length;i++){
var opt = document.createElement("option")
opt.innerHTML = address["0_"+proNum][i];
forms.city.appendChild(opt)
}
}else{
forms.city.disabled = true;
forms.country.disabled = true;
forms.city.innerHTML = "<option>請選擇城市</option>"
forms.country.innerHTML = "<option>請選擇區(qū)縣</option>"
}
}
forms.city.onchange = function(){
if (forms.city.selectedIndex !=0){
forms.country.innerHTML = "<option>請選擇區(qū)縣</option>"
forms.country.disabled = false;
proNum = forms.pro.selectedIndex;
var numum = forms.city.selectedIndex;
for(var i = 0 ; i<address["0_" + proNum+"_"+numum].length;i++){
var opt = document.createElement("option");
opt.innerHTML = address["0_"+proNum+"_"+numum][i];
forms.country.appendChild(opt);
}
}else{
forms.country.disabled = true;
forms.country.innerHTML = "<option>請選擇區(qū)縣</option>"
}
}
</script>
