首頁 > 開發者 > JSP

動態三級聯動菜單，無重新整理，jsp實現

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

總共三級，通過學院department選擇系division,通過系選擇專業speciality

<%@ page language="java" import="java.util.*,java.lang.*,java.sql.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <script language="javascript">
  var DeparmentCount; //三級聯動菜單代碼
  DeparmentCount = 0;
  var DivisionCount;
  DivisionCount = 0;
  var SpecialityCount;
  SpecialityCount = 0
  Department = new Array();
  Division = new Array();
  Speciality = new Array();
<%
  system.pub.oraclesql myDao = new system.pub.oraclesql();
  ResultSet rs = myDao.execQuery("select * from division");
  int i=0;
  for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
   Division[<%=i%>] = new Array("<%=rs.getString("Division_name")%>","<%=rs.getString("department_id")%>","<%=rs.getString("id")%>");
<%  }%>
  DivisionCount = <%=i%>;

<%
  System.out.println("debug....1");
  rs = myDao.execQuery("select * from speciality");
  i=0;
  for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
   Speciality[<%=i%>] = new Array("<%=rs.getString("Speciality_name")%>","<%=rs.getString("division_id")%>","<%=rs.getString("id")%>");
<%  }%>
  SpecialityCount = <%=i%>;
   
function changeDepartment(DepartmentId){
 document.form1.Switch.value="false";
 document.form1.division.length = 0;
     var DepartmentId = DepartmentId;
     var i;
     for (i=0;i < DivisionCount; i++){
         if (Division[i][1] == DepartmentId){
       document.form1.division.options[document.form1.division.length] = new Option(Division[i][0], Division[i][2]);
             }       
        }
       changeDivision(document.form1.division.value);
}

function changeDivision(DivisionId){
 document.form1.Switch.value="false";
    document.form1.speciality.length = 0;
 var DivisionId = DivisionId;
    var i;
    for (i=0;i < SpecialityCount; i++){
  if (Speciality[i][1] == DivisionId){
          document.form1.speciality.options[document.form1.speciality.length] = new Option(Speciality[i][0], Speciality[i][2]);
        }       
 }
 if(document.form1.speciality.length!=0){
  document.form1.speciality.style.visibility = 'visible';
 }
 else{  
  document.form1.speciality.style.visibility = 'hidden';
 }
}

function  initialSelect(){
changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
}

</script>
  </head>
 
  <body onload="initialSelect();">
<form name="form1">
   <select name="department" size="1" id="department" style="width:20%" onChange="changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value)">
<%
  rs = myDao.execQuery("select * from department");
  i=0;
  for(rs.next();!rs.isAfterLast();rs.next(),i++){%>
   <option value="<%=rs.getString("id")%>"><%=rs.getString("Department_name")%></option>
<%  }%> 
 </select>
 
    <select name="division" size="1" id="division" onChange="changeDivision(document.form1.division.options[document.form1.division.selectedIndex].value)">
 </select> 
  
 <input type="hidden" name="Switch" value="false">

 <select name="speciality"  size="1">
 </select>
</form>
  </body>
</html>

實現之後，從資料庫裡面讀三個表裡的資訊，產生的html代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <script language="javascript">
  var DeparmentCount; //三級聯動菜單代碼
  DeparmentCount = 0;
  var DivisionCount;
  DivisionCount = 0;
  var SpecialityCount;
  SpecialityCount = 0
  Department = new Array();
  Division = new Array();
  Speciality = new Array();

   Division[0] = new Array("ccddd","13","100");

   Division[1] = new Array("cc","14","101");

   Division[2] = new Array("cczz","14","102");

   Division[3] = new Array("sdfgsdfg","14","103");

   Division[4] = new Array("asdasdf","14","104");

   Division[5] = new Array("zxcvzxcv","14","106");

   Division[6] = new Array("zxcvzv","2","107");

   Division[7] = new Array("zxcvzxcv","13","108");

   Division[8] = new Array("電視新聞系","2","4");

   Division[9] = new Array("電視攝影系","2","5");

   Division[10] = new Array("教研室","3","6");

   Division[11] = new Array("機房","3","7");

   Division[12] = new Array("辦公室","3","8");

   Division[13] = new Array("zxcv","14","105");

   Division[14] = new Array("通訊工程系","1","1");

   Division[15] = new Array("電子資訊工程系","1","2");

   Division[16] = new Array("科學藝術系","1","3");

   Division[17] = new Array("aaaa","15","109");

  DivisionCount = 18;

   Speciality[0] = new Array("ertwert","101","100");

   Speciality[1] = new Array("vzxcvzxcv","100","101");

   Speciality[2] = new Array("zzz","100","102");

   Speciality[3] = new Array("asdf","100","103");

   Speciality[4] = new Array("新聞評論","4","1");

   Speciality[5] = new Array("網路新聞","4","2");

   Speciality[6] = new Array("多媒體技術","1","3");

   Speciality[7] = new Array("藝術攝影","5","4");

   Speciality[8] = new Array("kkkk","109","104");

  SpecialityCount = 9;
   
function changeDepartment(DepartmentId){
 document.form1.Switch.value="false";
 document.form1.division.length = 0;
     var DepartmentId = DepartmentId;
     var i;
     for (i=0;i < DivisionCount; i++){
         if (Division[i][1] == DepartmentId){
       document.form1.division.options[document.form1.division.length] = new Option(Division[i][0], Division[i][2]);
             }       
        }
       changeDivision(document.form1.division.value);
}

function changeDivision(DivisionId){
 document.form1.Switch.value="false";
    document.form1.speciality.length = 0;
 var DivisionId = DivisionId;
    var i;
    for (i=0;i < SpecialityCount; i++){
  if (Speciality[i][1] == DivisionId){
          document.form1.speciality.options[document.form1.speciality.length] = new Option(Speciality[i][0], Speciality[i][2]);
        }       
 }
 if(document.form1.speciality.length!=0){
  document.form1.speciality.style.visibility = 'visible';
 }
 else{  
  document.form1.speciality.style.visibility = 'hidden';
 }
}

function  initialSelect(){
changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
}

</script>
  </head>
 
  <body onload="initialSelect();">
<form name="form1">
   <select name="department" size="1" id="department" style="width:20%" onChange="changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value)">

   <option value="2">電視與新聞學院</option>

   <option value="3">計算中心</option>

   <option value="1">工程學院</option>

   <option value="13">fff</option>

   <option value="14">gdsf</option>

   <option value="15">zxcef</option>
 
 </select>
 
    <select name="division" size="1" id="division" onChange="changeDivision(document.form1.division.options[document.form1.division.selectedIndex].value)">
 </select> 
  
 <input type="hidden" name="Switch" value="false">

 <select name="speciality"  size="1">
 </select>
</form>
  </body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jsp book jsp 6161 jsp editor jsp quiz jsp language jsp tie free jsp hosting
相關文章
動態網頁製作技術JSP頁面顯示亂碼問題的解決
servlet、jsp跳轉(傳值)總結及URL傳參數__js
Spring Boot 最佳實務（二）整合Jsp與生產環境部署
JSP頁面列印
用JSP實現資料庫圖片的儲存與顯示執行個體
用jsp上傳圖片檔案，存貯到欄位類型為blob的流形式代碼

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More