<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用三维数组实现的三级联动下拉列表框</title>
<script language="JavaScript" type="text/javascript">
<!--
//按照省份下拉列表框的顺序定义三维数组,城市与其对应的地区县构成数组的第三维
var city=[
[ ["南京","南京1","南京2","南京3","南京4"],
["苏州","苏州1","苏州2","苏州3","苏州4"],
["南通","南通1","南通2","南通3","南通4"],
["常州","常州1","常州2","常州3","常州3"],
],
[ ["兰州","兰州1","兰州2","兰州3","兰州4"],
["白银","白银1","白银2","白银3","白银4"],
["定西","定西1","定西2","定西3","定西4"],
["敦煌","敦煌1","敦煌2","敦煌3","敦煌4"],
],
[ ["广州","广州1","广州2","广州3","广州4"],
["潮阳","潮阳1","潮阳2","潮阳3","潮阳4"],
["潮州","潮州1","潮州2","潮州3","潮州4","潮州5"],
["澄海","澄海1","澄海2","澄海3","澄海4"],
],
[ ["福州","福州1","福州2","福州3","福州4"],
["福安","福安1","福安2","福安3","福安4"],
["龙岩","龙岩1","龙岩2","龙岩3","龙岩4"],
["南平","南平1","南平2","南平3","南平4"],
]
];
//省会列表框的列表项改变触发的事件函数
function getCity(){
// 获得省会、城市、地区县三个下拉列表框数组
var provinceoptions = document.forms["theForm"].elements["province"];
var cityoptions = document.forms["theForm"].elements["city"];
var xianoptions = document.forms["theForm"].elements["xian"];
//清空上一次的设置
cityoptions.length = 1;
xianoptions.length = 1;
//如果省会列表框选择的不是“请选择“项，创建下拉列表
if(provinceoptions.selectedIndex !=0) {
//从数组中获得选中的省会列表项所对应的城市和地区县的二维数组
var citys = city[provinceoptions.selectedIndex-1];
//循环遍历二维数组
for(var i=0;i<citys.length;i++) {
//循环设置城市列表框的列表项
cityoptions[i+1] = new Option(citys[i][0],citys[i][0]);
//设置默认显示的城市列表项及其对应的第一个地区县
if(i==0) {
//循环设置默认显示的城市所对应的所有地区县到地区县列表框
for(var j=0;j<citys[0].length-1;j++) {
xianoptions[j+1] = new Option(citys[0][j+1],citys[0][j+1]);
}
//设置默认显示的城市列表项及其对应的第一个地区县
cityoptions.selectedIndex = 1;
xianoptions.selectedIndex = 1;
}
}
}
}
//城市列表框的列表项改变触发的事件函数
function getXian(){
// 获得省会、城市、地区县三个下拉列表框数组
var provinceoptions = document.forms["theForm"].elements["province"];
var cityoptions = document.forms["theForm"].elements["city"];
var xianoptions = document.forms["theForm"].elements["xian"];
//清空上一次的设置
xianoptions.length = 1;
//如果城市列表框选择的不是“请选择“项，创建地区县
if(cityoptions.selectedIndex != 0) {
//从数组中获得选中的省会列表项所对应的地区县的一维数组
var xians = city[provinceoptions.selectedIndex-1][cityoptions.selectedIndex-1];
//循环遍历一维数组
for(var i=1;i<xians.length;i++) {
//循环设置城市列表框的列表项
xianoptions[i] = new Option(xians[i],xians[i]);
//设置默认显示的地区县
xianoptions.selectedIndex = 1;
}
}
}
//-->
</script>
</head>
<body>
<form action="somepage.asp" name="theForm">
<select name="province" οnchange="getCity()">
<option value="0">请选择所在省份</option>
<option value="江苏省">江苏省</option>
<option value="福建省">甘肃省</option>
<option value="广东省">广东省</option>
<option value="甘肃省">福建省</option>
</select>
<select name="city" οnchange="getXian()">
<option value="0">请选择所在城市</option>
</select>
<select name="xian">
<option value="0">请选择所县</option>
</select>
</form>
</body>
</html>
扫一扫
1258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
