蝙蝠岛资源网

纯js三维数组实现三级联动效果
网络编程 2025/10/31 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

本文实例为大家分享了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,三级联动
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“纯js三维数组实现三级联动效果”

暂无纯js三维数组实现三级联动效果的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com