纯js三维数组实现三级联动效果
更新时间:2017年02月07日 10:41:37 作者:小菜鸟正洋洋
这篇文章主要为大家详细介绍了纯js三维数组实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
今天小编就为大家分享一篇使用layui日期控件laydate对开始和结束时间进行联动控制的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09怎么选择Javascript框架(Javascript Framework)
如果你正面临这样的问题,希望下面的几个建议对你在选择javascript框架上会有所帮助2013-11-11在JavaScript中查找字符串中最长单词的三种方法(推荐)
这篇文章主要介绍了在JavaScript中查找字符串中最长单词的三种方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-01-01
最新评论