代码链接块--省市联动

最新推荐文章于 2020-05-02 17:52:47 发布

$scope.靠谱青年

最新推荐文章于 2020-05-02 17:52:47 发布

阅读量142

点赞数

分类专栏：代码链接块

本文链接：https://blog.csdn.net/qq_36236621/article/details/103450298

版权

代码链接块专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		// 定义二维数组,存储城市信息
		var cities = new Array(4);
		cities[0] = new Array("市辖区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

		//给省的select注册onchange事件
		window.onload = init;
		function init(){
			//获取省select 绑定 onchange
			var provinceSelect = document.getElementById("province");
			provinceSelect.onchange = change;
		}
		
		function change(){
			//清空市select中的option
			document.getElementById("city").innerHTML = "<option>----请-选-择-市----</option>";
			//获取选中了哪一个省 this.value
			//发现 省的value值 和 二维数组中的下标正好相等
			var cs = cities[this.value];
			//遍历数组,取出每一个市的名称
			for(var i = 0;i < cs.length;i++){
				var cname = cs[i];
				//取出一个市.我们需要创建一个option
				var op = document.createElement("option");//<option></option>
				var textNode = document.createTextNode(cname);
				//把文本节点 添加到 op中
				op.appendChild(textNode);//<option>cname</option>
				//把每次创建的option添加到 市这个select中
				document.getElementById("city").appendChild(op);
			}
			
		}
		
	</script>
	<body>
		<select id="province" style="width:150px">
			<option value="">----请-选-择-省----</option>
			<option value="0">北京</option>
			<option value="1">吉林省</option>
			<option value="2">山东省</option>
			<option value="3">河北省</option>
			<option value="4">江苏省</option>
		</select>
		<select id="city" style="width:150px">
			<option value="">----请-选-择-市----</option>
			
		</select>
		
	</body>
</html>

实现效果：
在这里插入图片描述

$scope.靠谱青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码链接块--省市联动

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script> // 定义二维数组,存储城市信息 var cities = new Array(4); cities[0]...
复制链接

扫一扫

专栏目录