级联菜单（DHTML）

最新推荐文章于 2025-10-06 13:38:00 发布

原创最新推荐文章于 2025-10-06 13:38:00 发布 · 361 阅读

0 ·

CC 4.0 BY-SA版权

DHTML 专栏收录该内容

2 篇文章

订阅专栏

级联菜单

<!DOCTYPE html>
<html>
<head>
<title>selcity.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	function selCity() {
		var arr = [ [ '--选择城市--' ], [ "海淀", "朝阳", "东城", "西城" ],
				[ "沈阳", "大连", "鞍山", "抚顺" ], [ "济南", "青岛", "烟台", "威海" ],
				[ "洛阳", "郑州", "开封", "新郑" ] ];
		//拿到被选中的角标
		var index = document.getElementById("selid").selectedIndex;
		//alert(document.getElementById("selid").options[index].innerText);
		var subselNode = document.getElementById("subselid");
		var citys = arr[index];

		subselNode.options.length = 0;
		for ( var x = 0; x < citys.length; x++) {
			//alert(citys[x]);
			var optNode = document.createElement("option");
			optNode.innerText = citys[x];
			subselNode.appendChild(optNode);
		}

	}
</script>
</head>
<body>
	<select id="selid" onchange="selCity()">
		<option>---选择省市---</option>
		<option>北京</option>
		<option>辽宁</option>
		<option>山东</option>
		<option>河南</option>
	</select>


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

联动

<!DOCTYPE html>
<html>
<head>
<title>sel.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#cssid {
	height: 100px;
	width: 300px;
	background-color: #FFCC00;
}

#textid {
	width: 300px;
	background-color: #CCCCCC;
}
</style>
<script type="text/javascript">
	function change() {

		var selNode = document.getElementById("selid");
		var value = selNode[selNode.selectedIndex].value;
		//alert(value);

		var divNode1 = document.getElementById("cssid");
		var divNode2 = document.getElementById("textid");

		divNode1.style.textTransform = value;
		divNode2.innerText = "text-transform: " + value + " ;"
	}
</script>
</head>

<body>
	<div id="cssid">good good study,Day day up!</div>
	<p></p>
	<select id="selid" onchange="change()">
		<option value="none">---text---transform---</option>
		<option value="capitalize">首字母大写</option>
		<option value="uppercase">所有字母大写</option>
		<option value="lowercase">所有字母小写</option>
	</select>
	<p></p>
	<div id="textid">text-transform:none ;</div>
</body>
</html>