关联下拉列表代码示例

最新推荐文章于 2019-07-15 00:26:31 发布

footboy2012

最新推荐文章于 2019-07-15 00:26:31 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/laz383310051/article/details/83679147

javascript 专栏收录该内容

10 篇文章

订阅专栏


<html>
	<head>
		<style>
			#d1{
				width:400;
				height:250;
				background-color:#cccccc;
				left:30;
				top:40;
				position:absolute;
			}
			#d1_head{
				height:30;
				font-size:20pt;
				background-color:blue;
				color:white;
			}
			#d1_body{
				padding-left:40;
				padding-top:40;
			}
		</style>
		<script>
			var arr = new Array;
			arr[0] = [new Option('---方向---','-1')];
			arr[1] = [new Option('专业英语','zyen'),
			new Option('商务英语','swen')];
			arr[2] = [new Option('图形计算','txcp'),
			new Option('计算机应用','jscp'),
			new Option('软件工程','rjcp')];
			function change(index){
				var obj = document.getElementById('s2');
				obj.options.length = arr[index].length;
				for(i=0;i<arr[index].length;i++){
					obj.options[i] = arr[index][i];
				}
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<div id="d1_head">关联下拉列表</div>

			<div id="d1_body">
				<form>
					<select name="s1" id="s1" onchange="change(this.selectedIndex);">
						<option value="-1">---专业---</option>
						<option value="english">英语</option>
						<option value="computer">计算机</option>
					</select>

					<select name="s2" id="s2">
						<option value="-1">---方向---</option>
					</select>
					<input type="submit" value="confirm"/>
				</form>
			</div>
		</div>
	</body>

</html>