js实现二级联动小demo

听听那晚风

于 2020-12-01 17:45:18 发布

阅读量164

点赞数

分类专栏：原生JS 文章标签： js javascript css html5

本文链接：https://blog.csdn.net/GongWei_/article/details/110442004

版权

原生JS 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select id="one" onchange="fn(this.value)">
			<option value ="">——请选择——</option>
			<option value ="0">江西省</option>
			<option value ="1">广东省</option>
			<option value ="2">河南省</option>
		</select>
		<select id="two">
			<option value ="">——请选择——</option>
		</select>
		
	</body>
	<script type="text/javascript">
		var two=document.getElementById('two');
		var city=[]
		city[0]=["赣州市","南昌市","抚州市","九江市"]
		city[1]=["广州市","佛山市","深圳市","珠海市"]
		city[2]=["焦作市","开封市","驻马店","郑州市"]
		function fn(n){
			two.length=1;
			console.log(n)
			for(var i=0;i<city[n].length;i++){
				var op=new Option(city[n][i]);
				console.log(op);
				two.appendChild(op)
			}
		}
	</script>
</html>