js中三级联动的实现

联动的实现其实很简单，但是有些细节却很容易出错。在此分享一下我在学习了二级联动后，去实现三级联动的基本思路。
      思路：因为二级联动是一级联与二级联通过onchange事件连接，所以三级联动便是二级联与三级联连接。（可能表述不够清楚）简单的来说其过程大致是：a事件——触发——b事件——触发——c事件。
      注意事项：特别要注意其中数组对应的下标与选项value值的匹配。option选项中各项选项的value值也可以是数字，value值用数字更方便实现。
例题：
各学期对应课程
学年：第一学年、第二学年
学期：第一学期、第二学期
课程：
第一学年—>第一学期—>html,java，sqlserver基础,c#
第一学年—>第二学期—>javascript,.net,sqlserver高级,jsp
第二学年—>第一学期—>struts,asp.net,ajax
第二学年—>第二学期—>spring,hibernate                 '
代码：
java代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>三级联动</title>
</head>
<body >
    <h5><center>各学期对应课程</center></h5>
    
    <center>学年 <select id='year' onchange='change1(this)'>
        <option value='请选择'>请选择</option>
        <option value='第一学年'>第一学年</option>
        <option value='第二学年'>第二学年</option>
    </select>
    
    学期 <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>

js中三级联动的实现

推荐信息