级联列表
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="" id="bt1"></select>
<select name="" id="bt2"></select>
<select name="" id="bt3"></select>
<script>
var arr=["河北","河南","山东"];
var str="";
for(var n=0;n<arr.length;n++){
str+="<option>"+arr[n]+"</option>";
}
var bt1=document.getElementById("bt1");
bt1.innerHTML=str;
var city=[["唐山","秦皇岛","石家庄"],["郑州","开封","洛阳"],["青岛","济南"]];
var str1="";
for(var n=0;n<city[0].length;n++){
str1+="<option>"+city[0][n]+"</option>";
}
var bt2=document.getElementById("bt2");
bt2.innerHTML=str1;
var county=[[["乐亭","滦南","丰南"],["北戴河","昌黎","卢龙"],["石家庄一区","石家庄二区","石家庄三区"]],[["郑州一区","郑州二区"],["开封一区","开封二区"],["洛阳一区","洛阳二区"]],[["青岛一区","青岛二区"],["济南一区","济南二区"]]];
var str2="";
for(var n=0;n<county[0][0].length;n++){
str2+="<option>"+county[0][0][n]+"</option>"
}
var bt3=document.getElementById("bt3");
bt3.innerHTML=str2;
bt1.onchange=function(){
var index=bt1.selectedIndex;
var str3="";
for(var n=0;n<city[index].length;n++){
str3+="<option>"+city[index][n]+"</option>";
}
bt2.innerHTML=str3;
var index1=bt2.selectedIndex;
var str4="";
for(var j=0;j<county[index][index1].length;j++){
str4+="<option>"+county[index][index1][j]+"</option>";
}
var bt3=document.getElementById("bt3");
bt3.innerHTML=str4;
}
bt2.onchange=function(){
var index=bt1.selectedIndex;
var index2=bt2.selectedIndex;
var str5="";
for(var n=0;n<county[index][index2].length;n++){
str5+="<option>"+county[index][index2][n]+"</option>";
}
bt3.innerHTML=str5;
}
</script>
</body>
</html>
