41（案例）省市联动

最新推荐文章于 2020-12-27 18:36:06 发布

辛勤小王子

最新推荐文章于 2020-12-27 18:36:06 发布

阅读量133

点赞数

分类专栏： # Java Web学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_37917691/article/details/106031634

版权

Java Web学习笔记专栏收录该内容

124 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
	
 </head>
 <body>
 	<select id="country" onchange="changeCountry(this.value)">
		<option value="0">请选择</option>
		<option value="中国">中国</option>
		<option value="美国">美国</option>
		<option value="日本">日本</option>
	</select>

	<select id="city">
		
	</select>
	
 </body>

 <script type="text/javascript">
	//创建一个二维数组存储数据
	var arr = new Array(3);
	arr[0] = ["中国","北京","上海","厦门","深圳"];
	arr[1] = ["美国","芝加哥","华盛顿","纽约","波士顿"];
	arr[2] = ["日本","东京","大阪","广岛","长崎"];

	function changeCountry(value){
		//获取city的select
		var citySel = document.getElementById("city");
		//获取city中的option
		var options1 = citySel.getElementsByTagName("option");
		for(var m=0;m<options1.length;m++){
			var op = options1[m];
			//通过父节点删除
			citySel.removeChild(op);
			m--;
		}
		//遍历二维数组
		for(var i=0;i<arr.length;i++){
			var arr1 = arr[i];
			var country = arr1[0];
			if(value==country){
				for(var j=1;j<arr1.length;j++){
					var city = arr1[j];
					var option1 = document.createElement("option");
					var text1 = document.createTextNode(city);
					option1.appendChild(text1);
					citySel.appendChild(option1);
				}
			}
		}
	}

</script>
</html>

在这里插入图片描述

辛勤小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
41（案例）省市联动

<!DOCTYPE html><html lang="en"> <head> </head> <body> <select id="country" onchange="changeCountry(this.value)"> <option value="0">请选择</option> <option value="中国">中国</option> <op.
复制链接

扫一扫

专栏目录