js中三级联动的实现

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

    

各学期对应课程

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