Three level linkage effect realized by pure js three dimensional array
- 2021-07-18 06:34:55
- OfStack
In this paper, we share the specific code of Android9 palace picture display for your reference. The specific contents are as follows
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>3 Level linkage effect (pure JS Implementation) </p>
<div>
Professional direction: <select name="sel1" id="sel1">
<option>-- Please choose a major --</option>
<option>JAVA</option><option>PHP</option><option>UI</option>
</select>
</div>
<div>
Class name: <select name="sel2" id="sel2">
<option>-- Please select a class --</option>
</select>
</div>
<div>
Student name: <select name="sel3" id="sel3">
<option>-- Please select a student --</option>
</select>
</div>
<p>
Your selection is: <span id="sptext"></span>
</p>
<script>
var myclass = [
[['JAVA Class 01'],['JAVA Class 02'],['JAVA Class 03']],
[['PHP Class 01'],['PHP Class 02'],['PHP Class 03']],
[['UI Class 01'],['UI Class 02'],['UI Class 03']]
];
var mystudy= [
[ // No. 1 1 Dimension represents specialty , No. 1 2 Dimension represents the class of this major , No. 3 Dimension represents the students in this class
[['JAVA Class 01 Students 01'],['JAVA Class 01 Students 02'],['JAVA Class 01 Students 03'],['JAVA Class 01 Students 04']],
[['JAVA Class 02 Students 01'],['JAVA Class 02 Students 02'],['JAVA Class 02 Students 03'],['JAVA Class 02 Students 04']],
[['JAVA Class 03 Students 01'],['JAVA Class 03 Students 02'],['JAVA Class 03 Students 03'],['JAVA Class 03 Students 04']]
],
[
[['PHP Class 01 Students 01'],['PHP Class 01 Students 02'],['PHP Class 01 Students 03'],['PHP Class 01 Students 04']],
[['PHP Class 02 Students 01'],['PHP Class 02 Students 02'],['PHP Class 02 Students 03'],['PHP Class 02 Students 04']],
[['PHP Class 03 Students 01'],['PHP Class 03 Students 02'],['PHP Class 03 Students 03'],['PHP Class 03 Students 04']]
],
[
[['UI Class 01 Students 01'],['UI Class 01 Students 02'],['UI Class 01 Students 03'],['UI Class 01 Students 04']],
[['UI Class 02 Students 01'],['UI Class 02 Students 02'],['UI Class 02 Students 03'],['UI Class 02 Students 04']],
[['UI Class 03 Students 01'],['UI Class 03 Students 02'],['UI Class 03 Students 03'],['UI Class 03 Students 04']]
]
];
document.getElementById("sel1").onchange = function(){
// Gets the index value of the selected option from the 1 Started, did not return -1 )
var selectNum = this.selectedIndex;
// Empty the original option
document.getElementById("sel2").length=1;
document.getElementById("sel3").length=1;
// Loop to add child nodes
for(var i=0;i<myclass[selectNum-1].length;i++){
// Create Element Node
var node =document.createElement("OPTION");
// Create a text node
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>