JavaScript实现三级联动

最新推荐文章于 2023-09-23 13:15:52 发布

suncycle

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量1.2k

点赞数

文章标签： javascript function

本文链接：https://blog.csdn.net/dafdafdaf/article/details/6773794

版权

<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.οnlοad=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>

suncycle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现三级联动

JS实现省市区三级联动 //省份 var provinceArr = ['浙江','江苏', '江西', '内蒙古']; //市县,每个数组第一个元素为省份,其他的为这个省份下的市县 var cityArr = []; cityArr[0] = ['浙江'
复制链接

扫一扫