HTML部分

三級聯動

請選擇省份

請選擇城市

請選擇區縣

JS部分

// var address = new Object();

var forms = document.forms[0]; //獲取forms表單節點

//創建省份數組

var address = new Array();

address[0] = ['湖北省','湖南省','河南省'];

//創建城市數組

address["0_1"] = ['武漢市','鄂州市','黃岡市']

address["0_2"] = ['長沙市','婁底市','懷化市']

address["0_3"] = ['鄭州市','洛陽市','開封市']

address["0_1_1"] = ['武昌區','漢陽區','洪山區']

address["0_1_2"] = ['鄂城區','葛店區','華容區']

address["0_1_3"] = ['黃州區','羅田區','梁子湖區']

//創建區縣數組

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']

//循環遍歷 下標【0】的省份數組

for( i = 0 ; i

var opt = document.createElement("option");//創建節點

opt.innerHTML = address[0][i];//添加內容

forms.pro.appendChild(opt);//追加對應節點

}

//省份節點發生改變的時候觸發的方法

forms.pro.onchange = function(){

if (forms.pro.selectedIndex !=0){//判斷selectedIndex下標是否為0

forms.city.innerHTML = "請選擇城市"

forms.country.innerHTML = "請選擇區縣"

forms.city.disabled = false;// 不為0的情況下，解除城市選項的鎖定

proNum = forms.pro.selectedIndex;

for(var i = 0 ; 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 = "請選擇城市"

forms.country.innerHTML = "請選擇區縣"

}

}

forms.city.onchange = function(){

if (forms.city.selectedIndex !=0){

forms.country.innerHTML = "請選擇區縣"

forms.country.disabled = false;

proNum = forms.pro.selectedIndex;

var numum = forms.city.selectedIndex;

for(var i = 0 ; 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 = "請選擇區縣"

}

}

總結

以上是生活随笔為你收集整理的简书 php三级联动,JS 实现三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。