select元素+jQuery 级联操作

最新推荐文章于 2017-10-25 12:10:00 发布

孤独china

最新推荐文章于 2017-10-25 12:10:00 发布

阅读量3k

点赞数

分类专栏： HTML 文章标签： jquery select javascript 级联操作

本文链接：https://blog.csdn.net/guduchina/article/details/11681513

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>级联操作</title>
		<!--引用jQuery-->
		<script src="jquery-1.7.js"></script>
		<script language="javascript">
			var d = new Array();
			d[0] = ["计算机科学与技术","网络工程","软件工程","自动化"];
			d[1] = ["美术","音乐","舞蹈编导","表演","摄影"];
			d[2] = ["哲学","经济学","法学","汉语言文学"];
			function setMajor() {
				var index = $("[name = department]").val();
				var major = $("[name = major]");
				if(index!=-1) {
					// 清空专业下拉列表
					major.empty();
					for(i=0;i<d[index].length;i++) {
						// 产生一个option,参数为(内容,位置);
						var o = new Option(d[index][i],i+1);
						// 将option追加到下拉列表末尾
						major.append(o);
					}
				} else {
					// 清空专业下拉列表
					major.empty();
				}
			}
		</script>
	</head>
	
	<body>
		<select name="department" onChange="setMajor()">
			<option value="-1">--请选择--</option>
			<option value="0">计算机学院</option>
			<option value="1">艺术学院</option>
			<option value="2">文学院</option>
		</select>
		<select name="major"></select>
	</body>
</html>

一个很简单的级联操作，通过jQuery实现。数据是静态的，以后会考虑从数据库中读取。

jQuery中有简单的解释，有不懂的地方可以在评论中问我，我会详细解释。

这是刚学静态页面没多久写的，大神勿喷！

下边的是效果图：