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

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

您选择的内容是&＃xff1a;

var myclass &＃61; [

[[&＃39;JAVA班级01&＃39;],[&＃39;JAVA班级02&＃39;],[&＃39;JAVA班级03&＃39;]],

[[&＃39;PHP班级01&＃39;],[&＃39;PHP班级02&＃39;],[&＃39;PHP班级03&＃39;]],

[[&＃39;UI班级01&＃39;],[&＃39;UI班级02&＃39;],[&＃39;UI班级03&＃39;]]

];

var mystudy&＃61; [

[ //第一维代表专业 &＃xff0c; 第二维代表该专业的班级 &＃xff0c;第三维代表该班级的学生

[[&＃39;JAVA班级01学生01&＃39;],[&＃39;JAVA班级01学生02&＃39;],[&＃39;JAVA班级01学生03&＃39;],[&＃39;JAVA班级01学生04&＃39;]],

[[&＃39;JAVA班级02学生01&＃39;],[&＃39;JAVA班级02学生02&＃39;],[&＃39;JAVA班级02学生03&＃39;],[&＃39;JAVA班级02学生04&＃39;]],

[[&＃39;JAVA班级03学生01&＃39;],[&＃39;JAVA班级03学生02&＃39;],[&＃39;JAVA班级03学生03&＃39;],[&＃39;JAVA班级03学生04&＃39;]]

],

[

[[&＃39;PHP班级01学生01&＃39;],[&＃39;PHP班级01学生02&＃39;],[&＃39;PHP班级01学生03&＃39;],[&＃39;PHP班级01学生04&＃39;]],

[[&＃39;PHP班级02学生01&＃39;],[&＃39;PHP班级02学生02&＃39;],[&＃39;PHP班级02学生03&＃39;],[&＃39;PHP班级02学生04&＃39;]],

[[&＃39;PHP班级03学生01&＃39;],[&＃39;PHP班级03学生02&＃39;],[&＃39;PHP班级03学生03&＃39;],[&＃39;PHP班级03学生04&＃39;]]

],

[

[[&＃39;UI班级01学生01&＃39;],[&＃39;UI班级01学生02&＃39;],[&＃39;UI班级01学生03&＃39;],[&＃39;UI班级01学生04&＃39;]],

[[&＃39;UI班级02学生01&＃39;],[&＃39;UI班级02学生02&＃39;],[&＃39;UI班级02学生03&＃39;],[&＃39;UI班级02学生04&＃39;]],

[[&＃39;UI班级03学生01&＃39;],[&＃39;UI班级03学生02&＃39;],[&＃39;UI班级03学生03&＃39;],[&＃39;UI班级03学生04&＃39;]]

]

];

document.getElementById("sel1").onchange &＃61; function(){

//获取选择的选项的索引值(从1开始的&＃xff0c;没有返回-1)

var selectNum &＃61; this.selectedIndex;

//清空原来的选项

document.getElementById("sel2").length&＃61;1;

document.getElementById("sel3").length&＃61;1;

//循环添加子节点

for(var i&＃61;0;i

//创建元素节点

var node &＃61;document.createElement("OPTION");

//创建文本节点

var text &＃61; document.createTextNode(myclass[selectNum-1][i]);

node.appendChild(text);

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

}

};

document.getElementById("sel2").onchange &＃61; function(){

document.getElementById("sel3").length&＃61;1;

var selectStudentNum &＃61; this.selectedIndex;

var selectClassNum &＃61; document.getElementById("sel1").selectedIndex;

for(var i&＃61;0;i

var node &＃61;document.createElement("OPTION");

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

node.appendChild(text);

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

}

}