本文實例為大家分享了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> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
