純js三次元配列は三段階連動効果を実現します。
本論文の実例は、皆さんに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>