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