JavaScript实现二级联动下拉菜单

最新推荐文章于 2024-06-24 09:00:00 发布

MistyWood

最新推荐文章于 2024-06-24 09:00:00 发布

阅读量9.8k

点赞数 8

分类专栏：前端学习文章标签： JavaScript js

本文链接： https://blog.csdn.net/MistyWood/article/details/101010334

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

最近学习前端js，做了一个二级联动下拉菜单。二级下拉菜单的内容随着一级下拉菜单选项的更改而更改。菜单的内容是手动存在js的数组里的，随便写了几个数据。
效果图：
在这里插入图片描述

实现源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var proList=["北京","山东","河南","河北"];
		var allCityList=[
					["东城","西城","朝阳","丰台","石景山"],
					["济南","青岛","泰安","威海","潍坊","枣庄"],
					["郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡"],
					["石家庄","唐山","邢台"]
				];
		
		function f1(){
			var pro=document.getElementById("province");
			pro.length=proList.length+1;
			for(var i=1;i<pro.length;i++){
				pro[i].innerHTML=proList[i-1];
				pro[i].value=i;
			}
		}
		
		function f2(){
			var city=document.getElementById("city");
			var pro=document.getElementById("province");
			city.value=0;
			var cityList=allCityList[pro.value-1];
			city.length=cityList.length+1;
			for(var i=1;i<city.length;i++){
				city[i].innerText=cityList[i-1];
				city[i].value=i;
			}
		}
	</script>
	<body>
		
		<form action="#" method="get">
			<select name="province" id="province" onfocus="f1()" onchange="f2()">
				<option value="0">选择省份</option>
			</select> 省
			<select name="city" id="city">
				<option value="0">选择城市</option> 
			</select> 市/区
		</form>
	</body>
</html>