Dom编程（省、市连级菜单）

最新推荐文章于 2021-12-05 17:30:26 发布

Lola的笔记

最新推荐文章于 2021-12-05 17:30:26 发布

阅读量507

点赞数 1

本文链接：https://blog.csdn.net/melinda23096/article/details/38588081

版权

html+css+javascript 专栏收录该内容

20 篇文章 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 type="text/javascript">
function selCity(){
	var arr = [["--请选择城市--"],
		["海淀区","朝阳区","丰台区"],
		["石家庄","廊坊市","唐山市"],
		["太原市","大同市","忻州市"],
		["广州市","深圳市","东莞市"],
		["沈阳市","大连市","葫芦岛","锦州市"]];
	
	var selNode = document.getElementById("sel");
	var index  = selNode.selectedIndex;
	var subselNode = document.getElementById("subsel");
	
	subselNode.options.length = 0;
	/*for(var x=0; x<subselNode.options.length; ){
		subselNode.removeChild(subselNode.options[x]);	
	}*/
	
	var cities = arr[index];
	for(var x=0; x<cities.length; x++){
		var optionNode = document.createElement("option");
		subselNode.appendChild(optionNode);
		optionNode.innerText = cities[x];
	}
}
</script>
</head>

<body>
<select id="sel" οnchange="selCity()">
<option>--请选择省份--</option>
<option>北京</option>
<option>河北</option>
<option>山西</option>
<option>广东</option>
<option>辽宁</option>
</select>

<select id="subsel">
<option>--请选择城市--</option>
</select>
</body>
</html>