您的位置：首页 > Web前端 > JavaScript

JavaScript实现三级联动

2011-09-14 11:06 423 查看 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS实现省市区三级联动</title>
<script type="text/javascript">
//省份
var provinceArr = ['浙江','江苏', '江西', '内蒙古'];
//市县,每个数组第一个元素为省份,其他的为这个省份下的市县
var cityArr = [];
cityArr[0] = ['浙江', '宁波', '杭州', '龙游']; //要写数字索引
cityArr[1] = ['江苏', '南京','苏州','无锡'];
cityArr[2] = ['江西', '南昌', '九江'];
cityArr[3] = ['内蒙古', '乌兰浩特'];
//区镇,数组类似市县
var districtArr = [];
districtArr[0] = ['宁波', '江东', '北仑', '海曙'];
districtArr[1] = ['南昌', '湾里', '昌北'];
districtArr[2] = ['龙游', '塔石镇', '湖镇镇','溪口镇'];
districtArr[3] = ['南京', '雨花台', '玄武区','栖霞区'];
districtArr[4] = ['苏州', '苏州区1', '苏州区2','苏州区3'];

window.onload=function (){
//向省份的select里增加省份名
setprovince();
}
//向省份的select里增加省份名
function setprovince(){
//生成省份
for(var key in provinceArr) {
var province = document.getElementById('province');
var city = document.getElementById('city');
var district = document.getElementById('district');
////向省份的select里增加provinceArr<option>省份名</option>
province.options.add(new Option(provinceArr[key],provinceArr[key]));
}
}
//生成市县、区镇
//@current为当前选择的select节点，即父类节点
//@child为子类点
//@childArr为子节点数组
function showChild(current, child, childArr) {
var province = document.getElementById('province');
var city = document.getElementById('city');
var district = document.getElementById('district');
var currentValue = current.value;
var count = childArr.length;
//每次切换时,把城市的子option长度设置为1,即清除城市的选择,DOM对象select元素是长度是子option的个数
child.length = 1;
//切换省份时,把县区长度也设置为1
district.length = 1;
for(var i = 0; i < count; i++)
{
//判断所选的值即父类，与当前节点第一个数组元素是否相等
if(currentValue == childArr[i][0]) {
//不取第一个数组元素,因为第一个是父类，所以j从1开始，而不是0
for(var j = 1; j < childArr[i].length; j++) {
child.options.add(new Option(childArr[i][j],childArr[i][j]));
}
}
}
}
</script>
</head>

<body>
<select name="province" onChange="showChild(province, city, cityArr);" id="province">
<option value="省份" selected="selected">省份</option>
</select>
<select name="city" onChange="showChild(city, district, districtArr);" id="city">
<option value="城市" selected="selected">城市</option>
</select>
<select name="district" id="district">
<option value="县区" selected="selected">县区</option>
</select>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航