test.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML SELECTION</title>
  6. </head>
  7. <body>
  8. <form>
  9. <p>請選擇學院</p>
  10. <select id="college-list" onchange="changeCollege(this.selectedIndex)">
  11. <tr>
  12. {% for i1 in labels1 %}
  13. <option>{{i1}}</option>
  14. {% endfor %}
  15. </tr>
  16. </select>
  17. <br>
  18. <br>
  19. <p>當你選擇學院後,下列選單會列出屬於該學院的所有科系</p>
  20. <select id="sector-list">
  21. <tr>
  22. {% for i1 in labels2 %}
  23. <option>{{i1}}</option>
  24. {% endfor %}
  25. </tr>
  26. </select>
  27. </form>
  28. <script type="text/javascript">
  29. var colleges=['商學院','工學院','建設學院','金融學院','建築專業學院','國際科技與管理學院','資電學院','人文社會學院','理學院','經營管理學院','跨領域設計學院','跨科系學習'];
  30. var collegeSelect=document.getElementById("college-list");
  31. var inner="";
  32. for(var i=0;i<colleges.length;i++){
  33. inner=inner+'<option value=i>'+colleges[i]+'</option>';
  34. }
  35. collegeSelect.innerHTML=inner;
  36. var sectors=new Array();
  37. sectors[0]=['會計學系 ',' 國際經營與貿易學系' ,' 國際經營與貿易學系國際企業管理全英語學士班' ,' 財稅學系' ,' 合作經濟暨社會事業經營學系' ,' 統計學系 ',' 經濟學系' ,' 企業管理學系' ,' 行銷學系' ,' 國際企業管理學士學位學程(英語專班)' ,' 商學進修學士學位學程' ,'財經法律研究所' ,' 科技管理碩士學位學程' ,' 產業碩士專班' ,' 商學專業碩士在職學位學程' ,'商學博士學位學程 '];
  38. sectors[1]=['機械與電腦輔助工程學系 ',' 纖維與複合材料學系 ',' 工業工程與系統管理學系 ',' 化學工程學系 ',' 航太與系統工程學系 ',' 精密系統設計學士學位學程 ','電聲碩士學位學程 ',' 綠色能源科技碩士學位學程 ',' 創意設計碩士學位學程 ',' 材料與製造工程碩士在職專班 ',' 智能製造與工程管理碩士在職學位學程 ','機械與航空工程博士學位學程 '];
  39. function changeCollege(index){
  40. var Sinner="";
  41. for(var i=0;i<sectors[index].length;i++){
  42. Sinner=Sinner+'<option value=i>'+sectors[index][i]+'</option>';
  43. }
  44. var sectorSelect=document.getElementById("sector-list");
  45. sectorSelect.innerHTML=Sinner;
  46. }
  47. changeCollege(document.getElementById("college-list").selectedIndex);
  48. </script>
  49. </body>
  50. </html>