省市区三级联动实现（js实现）
主要思路是通过二维数组citys[j][k]储存城市名，通过三维数组areas[g][f][e]储存区域名。j、g值与其省份的value相同，k与f值相同。具体实现如下所示：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>三级联动</title>
<script>
var citys = new Array();
var areas = new Array();
citys[0]= new Array("成都");
citys[1] = new Array("广州","深圳");
citys[2] = new Array("昆明");
areas[0] = new Array();
areas[1] = new Array();
areas[2] = new Array();
areas[0][0]=new Array("青羊","锦江","金牛","武侯","成华","龙泉驿","青白江","高新","金堂","新都","温江","郫","双流","新津","大邑","蒲江");
areas[1][0]=new Array("荔湾","越秀","东山","天河","海珠","黄埔","芳村","白云","花都","番禺","广州经济技术开发","从化","增城","萝岗","清远","南沙","佛山");
areas[1][1] = new Array("福田","罗湖","南山","盐田","宝安","龙岗");
areas[2][0] = new Array("盘龙","五华","官渡","西山","安宁","呈贡","其他","东川");
function changeproc(obj){
if(obj.value==-1){
var mycity=citys[obj.value];
document.getElementById("city").options.length=0;
document.getElementById("area").options.length=0;
document.getElementById("area").options.add(new Option("--请选择区域--",-1));
document.getElementById("city").options.add(new Option("--请选择城市--",-1));
document.getElementById("myinfo").value="";
}
else{
var mycity=citys[obj.value];
document.getElementById("city").options.length=0;
document.getElementById("area").options.length=0;
document.getElementById("area").options.add(new Option("--请选择区域--",-1));
document.getElementById("city").options.add(new Option("--请选择城市--",-1));
for(var i = 0;i<mycity.length;i++){
document.getElementById("city").options.add(new Option(mycity[i],i));
}
document.getElementById("myinfo").value=obj.options[obj.selectedIndex].text+"省";
}
}
function changecity(obj){
if(obj.value==-1){
var province = document.getElementById("mysel");
document.getElementById("area").options.length=0;
document.getElementById("area").options.add(new Option("--请选择区域--",-1));
document.getElementById("myinfo").value = province.options[province.selectedIndex].text+"省";
}else{
var province = document.getElementById("mysel");
document.getElementById("area").options.length=0;
document.getElementById("area").options.add(new Option("--请选择区域--",-1));
for(var i = 0;i<areas[province.value][obj.value].length;i++){
document.getElementById("area").options.add(new Option(areas[province.value][obj.value][i],i));
}
document.getElementById("myinfo").value = province.options[province.selectedIndex].text+"省"+obj.options[obj.selectedIndex].text+"市";
}
}
function changearea(obj){
var province = document.getElementById("mysel");
var city = document.getElementById("city");
if(obj.value==-1){
document.getElementById("myinfo").value = province.options[province.selectedIndex].text+"省"+city.options[city.selectedIndex].text+"市" ;
}else{
document.getElementById("myinfo").value = province.options[province.selectedIndex].text+"省"+city.options[city.selectedIndex].text+"市"+obj.options[obj.selectedIndex].text+"区(县)";
}
}
</script>
</head>
<body>
<form id="myform" action="#" method="post">
省市区三级联动：<select name="mysel" id="mysel" onchange="changeproc(this)">
<option value="-1">--请选择省份--</option>
<option value="0">四川</option>
<option value="1">广东</option>
<option value="2">云南</option>
</select>
省
<select name="city" id="city" onchange="changecity(this)">
<option value="-1">--请选择城市--</option>
</select>
市
<select name="area" id="area" onchange="changearea(this)">
<option value="-1">--请选择区域--</option>
</select>
区(县)
<br />
<input id="myinfo" style="width: 300px"/>
</form>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
