下拉菜单--二级联动菜单练习

最新推荐文章于 2022-12-01 10:13:05 发布

公子薛

最新推荐文章于 2022-12-01 10:13:05 发布

阅读量775

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/xgcfxl2011/article/details/8253606

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>

<style type="text/css">

select{
	width:100px;
	}
	
</style>

<script type="text/javascript">
function selcity()
{
	var arr = [[],['海淀区', '朝阳区', '东城区', '西城区']
	,['沈阳', '大连', '鞍山', '抚顺']
	,['济南', '青岛', '烟台', '威海']
	,['石家庄', '廊坊', '唐山', '秦皇岛']];
	
	//获取选择的省的角标
	var selNode = document.getElementById("selid");
	var index = selNode.selectedIndex;
	var cities = arr[index];
	
	var subSelNode = document.getElementById("subselid");
	
	//有更简单的清除方式，只要改变下拉菜单的长度即可
	subSelNode.options.length = 0;
	
	/*
	//清除上一次选择的子菜单的内容
	for(var x = 1; x < subSelNode.options.length;)
	{
		subSelNode.removeChild(subSelNode.options[x]);
	}
	*/
	
	for(var x = 0; x < cities.length; x++)
	{
		var optNode = document.createElement("option");
		optNode.innerHTML = cities[x];
		subSelNode.appendChild(optNode);
	}
}
</script>

</head>

<body>

<select id="selid" οnchange="selcity()">
	<option>--选择省市--</option>
	<option>北京市</option>
	<option>辽宁省</option>
	<option>山东省</option>
	<option>河北省</option>
</select>
<select id="subselid">
	<option>--选择城市--</option>
</select>
</body>
</html>

运行结果：

公子薛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单--二级联动菜单练习

无标题文档select{ width:100px; } function selcity(){ var arr = [[],['海淀区', '朝阳区', '东城区', '西城区'] ,['沈阳', '大连', '鞍山', '抚顺'] ,['济南', '青岛', '烟台', '威海'] ,['石家庄', '廊坊', '唐山', '秦皇岛']]; //获取选择的省
复制链接

扫一扫