效果演示
:
完整代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级 省市区</title>
</head>
<body>
<select id="pro"></select>
<select id="city"></select>
<select id="area"></select>
<script>
var arr1=['安徽','河北','浙江'];//定义省的数组arr1
var arr2=[['合肥','滁州','芜湖'],['秦皇岛','唐山','邯郸'],['杭州','丽水','金华']];
//定义市的数组arr2
var arr3=[[['合肥一区','合肥二区','合肥三区'],['滁州一区','滁州二区','滁州三区'],
['芜湖一区','芜湖二区','芜湖三区']],[['秦皇岛一区','秦皇岛二区','秦皇岛三区'],
['唐山一区','唐山二区','唐山三区'],['邯郸一区','邯郸二区','邯郸三区']],
[['杭州一区','杭州二区','杭州三区'],['丽水一区','丽水二区','丽水三区'],
['金华一区','金华二区','金华三区']]];//定义区的数组arr3
var obj1=document.getElementById("pro");//获取省的select目标
var obj2=document.getElementById("city");//获取市的select目标
var obj3=document.getElementById("area");//获取区的select目标
//设置默认显示的省开始
var str1="";
for(var x=0;x<arr1.length;x++){
str1=str1+"<option>"+arr1[x]+"</option>";
}
obj1.innerHTML=str1;
//设置默认显示的省结束
//设置默认显示的市开始
var str2="";
for(vary=0;y<arr2[1].length;y++ ){
str2=str2+"<option>"+arr2[0][y]+"</option>";
}
obj2.innerHTML=str2;
//设置默认显示的市结束
//设置默认显示的区开始
var str3="";
for(var z=0;z<arr3[1].length;z++){
str3=str3+"<option>"+arr3[0][0][z]+"</option>";
}
obj3.innerHTML=str3;
//设置默认显示的区结束
obj1.οnchange=function(){
var inst1=this.selectedIndex;
varstr4="";
for(var m=0;m<arr2[inst1].length;m++){
str4=str4+"<option>"+arr2[inst1][m]+"</option>";
}
obj2.innerHTML=str4;
varstr5="";
for(var n=0;n<arr3[inst1][0].length;n++){
str5=str5+"<option>"+arr3[inst1][0][n]+"</option>";
}
obj3.innerHTML=str5;
obj2.οnchange=function(){
var inst2=this.selectedIndex;
varstr6="";
for(var n=0;n<arr3[inst1][inst2].length;n++){
str6=str6+"<option>"+arr3[inst1][inst2][n]+"</option>";
}
obj3.innerHTML=str6;
}
}
</script>
</body>
</html>