纯js三维数组实现三级联动效果

2019-11-19 17:42:09

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> <html> <head lang="en">   <meta charset="UTF-8">   <title></title> </head> <body> <p>三级联动效果（纯JS实现）</p> <div>   专业方向： <select name="sel1" id="sel1">   <option>--请选择专业--</option>   <option>JAVA</option><option>PHP</option><option>UI</option>   </select> </div> <div>   班级名称： <select name="sel2" id="sel2">   <option>--请选择班级--</option> </select> </div> <div>   学生姓名： <select name="sel3" id="sel3">   <option>--请选择学生--</option> </select> </div> <p>   您选择的内容是： <span id="sptext"></span> </p> <script>   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<myclass[selectNum-1].length;i++){     //创建元素节点     var node =document.createElement("OPTION");     //创建文本节点     var text = document.createTextNode(myclass[selectNum-1][i]);      node.appendChild(text);     document.getElementById("sel2").appendChild(node);   } };   document.getElementById("sel2").onchange = function(){     document.getElementById("sel3").length=1;     var selectStudentNum = this.selectedIndex;     var selectClassNum = document.getElementById("sel1").selectedIndex;     for(var i=0;i<mystudy[selectClassNum-1][selectStudentNum-1].length;i++){       var node =document.createElement("OPTION");       var text = document.createTextNode(mystudy[selectClassNum-1][selectStudentNum-1][i]);       node.appendChild(text);       document.getElementById("sel3").appendChild(node);     }   } </script> </body> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS日程管理插件FullCalendar简单实例

下一篇：在点击div中的p时，如何阻止事件冒泡