js中三级联动的实现

联动的实现其实很简单，但是有些细节却很容易出错。在此分享一下我在学习了二级联动后，去实现三级联动的基本思路。 
      思路：因为二级联动是一级联与二级联通过onchange事件连接，所以三级联动便是二级联与三级联连接。（可能表述不够清楚）简单的来说其过程大致是：a事件——触发——b事件——触发——c事件。 
      注意事项：特别要注意其中数组对应的下标与选项value值的匹配。option选项中各项选项的value值也可以是数字，value值用数字更方便实现。 
例题：      
各学期对应课程                                  
学年： 第一学年、第二学年 
学期： 第一学期、第二学期                          
课程： 
第一学年—>第一学期—>html,java，sqlserver基础,c# 
第一学年—>第二学期—>javascript,.net,sqlserver高级,jsp 
第二学年—>第一学期—>struts,asp.net,ajax 
第二学年—>第二学期—>spring,hibernate                 ' 
            
         
代码： 
java代码  

nbsp;html>  

各学期对应课程

        //获取学期对象  

        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['第二学年']=['第一学期','第二学期'];  

Select2实现的省市区三级联动

Select2实现的省市区三级联动

下载

           //保留学期下拉列表的第一项  

            term.options.length=1;    

            //遍历数组  

            for(var i=0; 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);  

            }      

        }