主要思路是通过二维数组citys[j][k]储存城市名,通过三维数组areas[g][f][e]储存区域名。j、g值与其省份的value相同,k与f值相同。具体实现如下所示:
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 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 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+"区(县)"; } }
省市区三级联动:
省
市
区(县)