javascript实现城市级联操作

来源：互联网发布：java中构造器编辑：程序博客网时间：2024/05/21 22:55
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br><script type="text/javascript">/*加载完成后初始化省份，城市数据，及地区数据*/var province;//省份直接数组var city;//存放城市二维数组var area;//存放地区三维数组function init(){//初始省份数据province = ["福建","广东","浙江"];//得到省份的Elementvar provinceid = document.getElementById("province");//为省份增加列表项for(var i = 0;i < province.length;i++){provinceid.add(new Option(province[i],province[i]));}//初始城市二维数组city = new Array(province.length);//二维数组第一项为省份数/*//初始化城市for(var i = 0; i < city.length; i++){//为每个省份增加城市//根据省份从数据库中取得城市city[i] = ["","","",];}*///这里直接指定city[0] = ["厦门","三明","龙岩"];city[1] = ["广州","深圳","东莞"];city[2] = ["温州","金华","杭州"];//初始地区的三维数组area = new Array(province.length);//三维数组一维为为省份，长度为省份数for(var j = 0; j < area.length; j++){//三维数组第二项为每个省份的城市，数组长度为各省份的城市数area[j] = new Array(city[j].length);}/*//初始各地区的数据for(var k = 0; k < area.length; k++){for(var p = 0; p < area[k]).length; p++{var[k][p] = ["",""];}}*///这里直接指定area[0][0] = ["思明区","海沧区","湖里区","集美区","同安区","翔安区"];area[0][1] = ["梅列区","三元区","永安市","明溪县","清流县","宁化县","大田县","尤溪县","沙县","将乐县","泰宁县","建宁县"];area[0][2] = ["新罗区","漳平市","长汀县","永定县","上杭县","武平县","连城县"];area[1][0] = ["从化市","天河区","东山区","白云区","海珠区","荔湾区","越秀区","黄埔区","番禺区","花都区","增城区","从化区","市郊"];area[1][1] = ["福田区","罗湖区","南山区","宝安区","龙岗区","盐田区"];area[1][2] = ["南城区","东城区","万江区","莞城区","石龙镇","虎门镇","麻涌镇","道滘镇","石碣镇","沙田镇","望牛墩镇","洪梅镇","茶山镇","寮步镇","大岭山镇","大朗镇","黄江镇","樟木头","凤岗镇","塘厦镇","谢岗镇","厚街镇","清溪镇","常平镇","桥头镇","横沥镇","东坑镇","企石镇","石排镇","长安镇","中堂镇","高埗镇"];area[2][0] = ["鹿城区","龙湾区","瓯海区","瑞安市","乐清市","洞头县","永嘉县","平阳县","苍南县","文成县","泰顺县"];area[2][1] = ["婺城区","金东区","兰溪市","市区","佛堂镇","上溪镇","义亭镇","大陈镇","苏溪镇","赤岸镇","东阳市","永康市","武义县","浦江县","磐安县"];area[2][2] = ["西湖区","上城区","下城区","拱墅区","滨江区","江干区","萧山区","余杭区","市郊","建德市","富阳市","临安市","桐庐县","淳安县"];}/*当选择省份的时候触发此函数*/function showCity(){//得到省份的Elementvar provinceid = document.getElementById("province");//得到城市的Elementvar cityid = document.getElementById("city");//清空城市的选项cityid.length = 0;//判断第一项的值 //判断选中的值为省份数组中的某个值for(var i = 0; i < province.length; i++){if(province[i] == provinceid.value){//遍历这个省份的所有城市，并添加到城市下拉中for(var j = 0; j < city[i].length;j ++){cityid.add(new Option(city[i][j],city[i][j]));}}}//调用显示地区函数showArea();}/*当选择城市的时候触发此函数*/function showArea(){//得到省份的Elementvar provinceid = document.getElementById("province");//得到城市的Elementvar cityid = document.getElementById("city");//得到地区的Elementvar areaid = document.getElementById("area");//清空地区的选项areaid.length = 0;//判断第一项的值 //判断选中的值为城市数组中的某个值for(var i = 0; i < province.length; i++){if(province[i] == provinceid.value){//遍历这个省份的所有城市，并判断选中的城市是否在所有城市中for(var j = 0; j < city[i].length; j++){if(city[i][j] == cityid.value){//遍历这个城市的所有地区，并为地区下拉列表添加数据for(var p = 0; p < area[i][j].length; p++){areaid.add(new Option(area[i][j][p],area[i][j][p]));}}}}}}</script><title>无标题文档</title></head><body onLoad="init()"><form name = "form" action="http://www.baidu.com" method="get"><p>地 址：<select id="province" onChange="showCity()"><option value="select">请选择省份</option></select> <select id="city" onChange="showArea()"><option value="select">请选择城市</option></select> <select id="area"><option value="select">请选择地区</option></select> </p></body></html>
数据都是先初始化的
0 0