纯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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
javascript中new关键字详解
Dec 14 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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简单提示框alert封装函数
2010/08/08 PHP
学习php分页代码实例
2013/10/24 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP中的session安全吗?
2016/01/22 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
javascript import css实例代码
2008/07/18 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
深入浅出学习python装饰器
2017/09/29 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
Windows和Linux动态库应用异同
2016/04/17 面试题
音乐节策划方案
2014/06/09 职场文书
2014年护士长工作总结
2014/11/11 职场文书
安全承诺书
2015/01/19 职场文书
2015年采购部工作总结
2015/04/23 职场文书
工会文体活动总结
2015/05/07 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
小学感恩主题班会
2015/08/12 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android