js中三级联动的实现

来源:互联网 发布:股票大作手回忆录 知乎 编辑:程序博客网 时间:2024/06/05 07:20
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>
0 0
原创粉丝点击