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

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下

三级联动效果(纯JS实现)

专业方向：

--请选择专业--

JAVAPHPUI

班级名称：

--请选择班级--

学生姓名：

--请选择学生--

您选择的内容是：

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

//创建元素节点

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

var node =document.createElement("OPTION");

var text = document.createTextNode(mystudy[selectClassNum-1][selectStudentNum-1][i]);

node.appendChild(text);

document.getElementById("sel3").appendChild(node);

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网