Javascript学习笔记（13_6） --js事件（省市区的三级联动）

最新推荐文章于 2019-09-27 12:32:00 发布

桑丘紫言

最新推荐文章于 2019-09-27 12:32:00 发布

阅读量203

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39209728/article/details/80737127

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市区的三级联动</title>
		<style type="text/css">
			#box{
				width: 600px;
				margin: 50px auto;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<select name="省">
			</select>
			<select name="市">
			</select>
			<select name="区">
			</select>

		</div>

		<script src="script.js"></script>
	</body>

</html>

var arr = [  //多维数组
	"北京",[
	"朝阳区",["朝阳1","朝阳2","朝阳3"],
	"海淀区",["海淀1","海淀2","海淀3"]
	],
	"上海",[
	"浦东区",["浦东1","浦东2","浦东3"],
	"浦西区",["浦西1","浦西2","浦西3"]
	],
	"山西",[
	"吕梁",["吕梁1","吕梁2","吕梁3"],
	"晋中",["晋中1","晋中2","晋中3"]
	]
]


var box = document.getElementById("box"),
	osls = box.getElementsByTagName("select");
	
for(var i = 0 ; i < arr.length; i++ ){
	if(typeof arr[i] == "string"){
		/*var op = document.createElement("option");
		op.value = arr[i];
		op.innerHTML = arr[i];
		osls[0].appendChild(op);*/
		osls[0].add(new Option(arr[i],arr[i]));//参数1---value  参数2 ---innerHTML
	}
}


osls[0].onchange = function(e){
//	alert(osls[0].value)
	
	for(var i = 0 ; i < arr.length; i++){
		if(typeof arr[i] == "string"){
			if(osls[0].value == arr[i]){
				var brr = arr[i+1];
				osls[1].value = null;
				osls[1].innerHTML = null;
			 for(var j = 0 ; j < brr.length; j++){
			 	if(typeof brr[j] == "string"){
			 		osls[1].add(new Option(brr[j],brr[j]));//参数1---value  参数2 ---innerHTML
			 		
			 	}
			 }
			}
			
		
		}
	}
	
}

osls[1].onchange = function(){
//		alert(osls[1].value)
	for(var i = 0 ; i < arr.length ; i ++){
		if(typeof arr[i] != "string"){
			var brr = arr[i];
			
			for(var j = 0 ; j < brr.length ; j++){
				if(typeof brr[j] == "string"){
					if(brr[j] == osls[1].value){
						var crr = brr[j+1];
						osls[2].innerHTML = null;
						for(var k = 0 ; k < crr.length ; k++){
							osls[2].add(new Option(crr[k],crr[k]));//参数1---value  参数2 ---innerHTML
						}
						
					}
			 		
			 		
			 	}
			}
		}
	}
}

桑丘紫言

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习笔记（13_6） --js事件（省市区的三级联动）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;省市区的三级联动&lt;/title&gt; &lt;style type="text/css"&gt; #box{ width: 600px;
复制链接

扫一扫