<!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>
下载本文