<!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>
新聞熱點
疑難解答
