最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯js三维数组实现三级联动效果
时间:2017-03-17 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
三级联动效果(纯JS实现) 专业方向:
班级名称:
学生姓名:
您选择的内容是: var myclass = [ [['JAVA班级01'],['JAVA班级02'],['JAVA班级03']], [['PHP班级01'],['PHP班级02'],['PHP班级03']], [['UI班级01'],['UI班级02'],['UI班级03']] ]; var mystudy= [ [ //第一维代表专业 , 第二维代表该专业的班级 ,第三维代表该班级的学生 [['JAVA班级01学生01'],['JAVA班级01学生02'],['JAVA班级01学生03'],['JAVA班级01学生04']], [['JAVA班级02学生01'],['JAVA班级02学生02'],['JAVA班级02学生03'],['JAVA班级02学生04']], [['JAVA班级03学生01'],['JAVA班级03学生02'],['JAVA班级03学生03'],['JAVA班级03学生04']] ], [ [['PHP班级01学生01'],['PHP班级01学生02'],['PHP班级01学生03'],['PHP班级01学生04']], [['PHP班级02学生01'],['PHP班级02学生02'],['PHP班级02学生03'],['PHP班级02学生04']], [['PHP班级03学生01'],['PHP班级03学生02'],['PHP班级03学生03'],['PHP班级03学生04']] ], [ [['UI班级01学生01'],['UI班级01学生02'],['UI班级01学生03'],['UI班级01学生04']], [['UI班级02学生01'],['UI班级02学生02'],['UI班级02学生03'],['UI班级02学生04']], [['UI班级03学生01'],['UI班级03学生02'],['UI班级03学生03'],['UI班级03学生04']] ] ]; document.getElementById("sel1").onchange = function(){ //获取选择的选项的索引值(从1开始的,没有返回-1) var selectNum = this.selectedIndex; //清空原来的选项 document.getElementById("sel2").length=1; document.getElementById("sel3").length=1; //循环添加子节点 for(var i=0;i //创建元素节点 varnode=document.createElement("OPTION"); //创建文本节点 vartext=document.createTextNode(myclass[selectNum-1][i]); node.appendChild(text); document.getElementById("sel2").appendChild(node); } }; document.getElementById("sel2").onchange=function(){ document.getElementById("sel3").length=1; varselectStudentNum=this.selectedIndex; varselectClassNum=document.getElementById("sel1").selectedIndex; for(vari=0;i varnode=document.createElement("OPTION"); vartext=document.createTextNode(mystudy[selectClassNum-1][selectStudentNum-1][i]); node.appendChild(text); document.getElementById("sel3").appendChild(node); } } |