二级联动

小白白007

于 2019-10-23 17:03:11 发布

阅读量687

点赞数

分类专栏：前端文章标签： js 二级联动

本文链接：https://blog.csdn.net/qq_43661841/article/details/102705556

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

利用js完成简单的二级联动

<!DOCTYPE html>
<html>
<head>
	<title>
		省市二级联动下拉列表
	</title>
	<script type="text/javascript">
		//定义一个二维数组存储省份和城市数据
		var arr = new Array();
		arr[0] = ["天津","红桥","西青","河北"];
		arr[1] = ["四川","成都","绵阳","攀枝花"];
		arr[2] = ["广东","佛山","广州","梅州"];
		arr[3] = ["湖南","长沙","衡阳","株洲"];
		
		window.onload = function(){
			//获取省份元素	
			var province = document.getElementById('province');
			arr.forEach(function(val){
				//创建option元素
				var option = document.createElement("option");
				//创建文本
				option.innerHTML = val[0];
				//option元素添加到select里面
				province.appendChild(option);
			});

			//给province元素添加onchange，一般我们的下拉列表都是添加onchange事件
			var city = document.getElementById("city");
			province.onchange = function(){
					var city = document.getElementById("city");
					//删除城市里面列表项
					//获取city里面的所有option元素
					var cityOption = city.getElementsByTagName('option');
					for (var i = 0; i < cityOption.length; i++) {
						city.removeChild(cityOption[i]);
						i--;
					}
					//用父节点调用删除节点方法	把option删除
					arr.forEach(function(val){	
						if(val[0] == province.value){
							for(var i = 1;i < val.length;i++){
								console.log("fjdoif");
								//创建option元素
								var option = document.createElement("option");
								//添加文本
								option.innerHTML = val[i];
								city.appendChild(option);
							}
						}
				});
			}

		}
	</script>
</head>
	<body>
		<select id = "province">
			<option value = "0">请选择省份</option>
		</select>
		<select id = "city">
			<option value = "0">请选择城市</option>
		</select>
	</body>
</html>

``