js中三级联动的实现

最新推荐文章于 2021-11-20 13:24:26 发布

sunly-13

最新推荐文章于 2021-11-20 13:24:26 发布

阅读量246

点赞数

文章标签： javascript ViewUI

java基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[b][align=center][size=large]js中三级联动的实现[/size][/align][/b]
[b]联动的实现其实很简单，但是有些细节却很容易出错。在此分享一下我在学习了二级联动后，去实现三级联动的基本思路。
思路：因为二级联动是一级联与二级联通过onchange事件连接，所以三级联动便是二级联与三级联连接。（可能表述不够清楚）简单的来说其过程大致是：A事件——触发——B事件——触发——C事件。
注意事项：特别要注意其中数组对应的下标与选项value值的匹配。option选项中各项选项的value值也可以是数字，value值用数字更方便实现。
例题：
各学期对应课程
学年：第一学年、第二学年
学期：第一学期、第二学期
课程：
第一学年—>第一学期—>HTML,Java，SqlServer基础,C#
第一学年—>第二学期—>javascript,.Net,SqlServer高级,JSP
第二学年—>第一学期—>Struts,ASP.NET,Ajax
第二学年—>第二学期—>Spring,Hibernate [/b] '

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">  
  <title>三级联动</title>
 </head>
 <body >
	<h5><center>各学期对应课程</center></h5>
	<!--选项改变事件onchange调用change1(this)函数，实现 学年 与 学期 之间的联动-->
	<center>学年 <select id='year' onchange='change1(this)'>
		<option value='请选择'>请选择</option>
		<option value='第一学年'>第一学年</option>
		<option value='第二学年'>第二学年</option>
	</select>  
	<!--选项改变事件onchange调用change2(this)函数，实现 学期 与 课程 之间的联动-->
	学期 <select id='term' onchange='change2(this)'>
		<option value='请选择' >请选择</option>
		</select>  

	课程 <select id='course' >
		<option value='请选择'>请选择</option>
		</select></center>

 </body>
	<script>
		//获取学期对象
		var term = document.getElementById('term');
		//获取课程对象
		var course = document.getElementById('course');		
		//创建change1(obj1)函数，其中参数obj1是获取 学年 的option选项中的value值
		function change1(obj1){
			//获取obj1的值
			var o1 = obj1.value;
			//创建二维数组存放学年对应的学期
			var array1 = new Array();       
			array1['第一学年']=['第一学期','第二学期'];				        
			array1['第二学年']=['第一学期','第二学期'];
		   //保留学期下拉列表的第一项
			term.options.length=1;	
			//遍历数组
			for(var i=0; i<array1[o1].length;i++){
					//如果是第一学年，则将第一学期的value值设为0，第二学期的value值设为1;
					if(o1=='第一学年'){
						//new Option(”显示内容”，“值”)
						var opt1 = new Option(array1[o1][i],i);
					}
					//如果是第二学年，则将第一学期的value值设为2，第二学期的value值设为3；这样设置其value值的目的是好与课程对应的数组行下标一一对应。
					else{
						opt1 = new Option(array1[o1][i],i+2);
					}
					//动态添加选项opt1到term中，得到下拉列表项
					term.options.add(opt1);
			}
		}
		//创建change2(obj2)函数，其中参数obj2是获取 学期 的option选项中的value值
		function change2(obj2){
			//获取obj2的值
			var o2 = obj2.value;
			//创建二维数组array2存放学期对应的课程
			var array2 = new Array();
			array2[0]=['HTML','Java','SqlServer基础','C#'];
			array2[1]=['javascript','.Net','SqlServer高级','JSP'];
			array2[2]=['Struts','ASP.NET','Ajax'];
			array2[3]=['Spring','Hibernate'];	
			 //保留学期下拉列表的第一项
			course.options.length=1;
			//遍历数组，将选项opt2到course中，得到下拉列表项
			for(var i in array2[o2]){
				var opt2 = new Option(array2[o2][i],i);
					course.options.add(opt2);
			}	 
		}
	</script>
</html>