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


Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
react 创建单例组件的方法
Apr 26 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 #Javascript
bootstrap vue.js实现tab效果
Feb 07 #Javascript
Node连接mysql数据库方法介绍
Feb 07 #Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 #Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
You might like
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
golang与PHP输出excel示例
2016/07/22 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python Requests库基本用法示例
2018/08/20 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
pip安装python库的方法总结
2019/08/02 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
瀑布模型都有哪些优缺点
2014/06/23 面试题
人事专员岗位职责
2013/11/20 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
民生工作实施方案
2014/05/31 职场文书
环保公益策划方案
2014/08/15 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL