您的位置：首页 > Web前端 > JavaScript
javascript实现城市级联操作

2015-11-02 15:12 459 查看
<!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 = ["福建","广东","浙江"];
//得到省份的Element
var 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(){
//得到省份的Element
var provinceid = document.getElementById("province");
//得到城市的Element
var 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(){
//得到省份的Element
var provinceid = document.getElementById("province");
//得到城市的Element
var cityid = document.getElementById("city");
//得到地区的Element
var 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>
数据都是先初始化的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航