JS两个小练习（二级联动菜单、好友列表）

本文链接：https://blog.youkuaiyun.com/weixin_46800546/article/details/108674670

本文介绍了一种使用HTML和JavaScript实现的二级联动菜单，可根据省份选择对应城市。此外，还展示了通过点击操作来显示或隐藏好友列表的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.二级联动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动菜单</title>

	<script>
		function selectCity(thisobj){
			//在第一个下拉框中选中一个省市信息，在第二个下拉框中填写对应的城市信息
			var cities = {
				"北京市":["海淀区","朝阳区","丰台区"],
				"河北省":["石家庄","唐山","秦皇岛"],
				"辽宁省":["沈阳","大连","鞍山"],
				"山东省":["青岛","济南","烟台"]
			}
			//获取城市信息
			var city = cities[thisobj.value];
			//将获取到的城市信息添加到第二个下拉框当中
			var se_city = document.getElementById("city");
			//需要在添加城市信息之前将第二个下拉菜单清空一次。
			se_city.innerHTML = "<option>--请选择--</option>";、
			//循环添加城市信息。
			for(var i=0;i<city.length;i++){、
				se_city.innerHTML += "<option>"+city[i]+"</option>";    
			}
		}	
	</script>

</head>
<body>
<select id="province" onchange="selectCity(this)">
	<option>--选择省市--</option>
	<option>北京市</option>
	<option>河北省</option>
	<option>辽宁省</option>
	<option>山东省</option>
</select>

<select id="city">
	<option>--选择城市--</option>
</select>
</body>

</html>

2.好友列表

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>好友列表</title>
<style type="text/css">
table {
	border:#0099FF 1px solid;
	width:100px;
	border-collapse:collapse;
	}
	
table td{
	border:#0066FF 1px solid;
	background-color:#FF9900;
	text-align:center;
	}
	
table td div {
	background-color:#FFFF99;
	text-align:left;
	}
	
table td a:link, table td a:visited {
	color:#00ffFF;
	text-decoration:none;
	}
	
table td a:hover {
	color:#00CC00;
	}
table td div {
	display:none;
	}
.open {
	display:block;
	}
.close {
	display:none;
	} 
</style>

<script type="text/javascript">
		//在页面点击a标签实现div的展示和关闭效果。
		//第一个a标签的兄弟标签div的展示和关闭
		function openDiv(thisobj){
			var div = thisobj.nextSibling.nextSibling;

			//当前点击的a的兄弟div展开和关闭，其他div都应该关闭。
			//先找到全部div，再排除当前div
			var divs = document.getElementsByTagName("div");
			//找到所有不是当前div的div对象，并将它们关闭
			for(var i=0;i<divs.length;i++){
				if(divs[i] != div){
					divs[i].style.display = "none";
				}
			}
			
			//div展开就关闭，关闭就展开
			/*if(div.style.display == "none"){
				div.style.display = "block"
			}else{
				div.style.display = "none";
			}*/
			div.style.display == "block"?div.style.display = "none":div.style.display = "block";
			
		}
</script>
</head>
<body>
<table>
	<tr>
		<td>
			<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
			<div>
				秦始皇<br />
				刘邦<br />
				李世民<br />
				康熙<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
			<div>
				刘备<br />
				关羽<br />
				张飞<br />
				赵云<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
			<div>
				西施<br />
				貂蝉<br />
				杨贵妃<br />
				王昭君<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
			<div>
				马云<br />
				李开复<br />
				俞敏洪<br />
				李彦宏<br />
			</div>
		</td>
	</tr>
</table>
</body>
</html>