纯js三维数组实现三级联动效果
程序员文章站
2023-04-01 22:21:43
本文实例为大家分享了android九宫格图片展示的具体代码，供大家参考，具体内容如下
...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 小米卢伟冰：TOF技术是噱头 骗用户花钱
下一篇： 微信账号突然无法登陆抖音：暂时无解