如何用JSP+JavaScript實現二級級聯下拉菜單

本篇內容主要講解“如何用JSP+JavaScript實現二級級聯下拉菜單”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何用JSP+JavaScript實現二級級聯下拉菜單”吧!

那么我們開始JSP+JavaScript打造二級級聯下拉菜單：

打造JSP JavaScript二級級聯下拉菜單之變量的的定義：

◆class(一級欄目信息)：

◆classId(自動編號)

◆className(欄目名稱)

◆Nclass(二級欄目信息)

◆NclassId(自動編號)

◆NclassName(欄目名稱)

◆parentId(一級欄目id，與class表中的classId關聯)

﹤%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %﹥  ﹤%@ include file=../conn.jsp%﹥  ﹤%@ include file=../ds.jsp%﹥  ﹤%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %﹥  ﹤%request.setCharacterEncoding(gb2312); %﹥

打造JSP+JavaScript二級級聯下拉菜單之級聯菜單制作

﹤HTML﹥﹤HEAD﹥  ﹤META. http-equiv=Content-Type content=text/html; charset=gb2312﹥   ﹤TITLE﹥級聯菜單﹤/TITLE﹥  ﹤LINK rel=stylesheet type=text/css href=style.css﹥  ﹤/HEAD﹥

◆從數據庫中得到二級欄目信息

﹤%String sql=select * from Nclass order by NclassId asc;  ResultSet rs=stmt.executeQuery(sql);  %﹥

◆將二級欄目信息保存到數組subcat中

﹤script. type=text/javascript﹥  var onecount;  onecount=0;  subcat = new Array();          ﹤%          int count = 0;          while(rs.next()){          %﹥  subcat[﹤%=count%﹥] = new Array(﹤%=rs.getString(NclassName)%﹥,  ﹤%=rs.getString(NclassId)%﹥,﹤%=rs.getString(parentId)%﹥);          ﹤%          count++;          }          rs.close();          %﹥  onecount=﹤%=count%﹥;

◆決定Select顯示的函數

 function changelocation(locationid)      {      document.myform.NclassId.length = 0;       var locationidlocationid=locationid;      var i;      for (i=0;i ﹤ onecount; i++)          {              if (subcat[i][2] == locationid)              {                  document.myform.NclassId.options[document.myform.NclassId.length] = new  Option(subcat[i][0], subcat[i][1]);              }                 }               }     ﹤/script﹥

◆JSP JavaScript二級級聯菜單的制作

﹤FORM. method=POST name=myform. action=adminsave.jsp?action=add﹥    ﹤TABLE﹥          ﹤TR﹥        ﹤TD﹥一級分類﹤/TD﹥        ﹤TD﹥           ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options  [document.myform.classId.selectedIndex].value) size=1﹥            ﹤OPTION selected value﹥==請選一級分類==﹤/OPTION﹥          ﹤sql:query var=query dataSource=$﹥            SELECT * FROM class         ﹤/sql:query﹥  ﹤c:forEach var=row items=$﹥   ﹤option value=$﹥$﹤/option﹥  ﹤/c:forEach﹥  ﹤/select﹥        ﹤/TD﹥        ﹤TD﹥選擇二級分類﹤/TD﹥        ﹤TD﹥          ﹤SELECT name=NclassId﹥            ﹤OPTION selected value﹥==請選二級分類==﹤/OPTION﹥          ﹤/SELECT﹥        ﹤/TD﹥      ﹤/TR﹥  ﹤/TABLE﹥     ﹤/FORM﹥  ﹤/BODY﹥  ﹤/HTML﹥  ﹤%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %﹥  ﹤%@ include file=../conn.jsp%﹥  ﹤%@ include file=../ds.jsp%﹥  ﹤%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %﹥  ﹤%request.setCharacterEncoding(gb2312); %﹥  ﹤HTML﹥﹤HEAD﹥  ﹤META. http-equiv=Content-Type content=text/html; charset=gb2312﹥   ﹤TITLE﹥級聯菜單﹤/TITLE﹥  ﹤LINK rel=stylesheet type=text/css href=style.css﹥  ﹤/HEAD﹥  ﹤!--從數據庫中得到二級欄目信息--﹥  ﹤%String sql=select * from Nclass order by NclassId asc;  ResultSet rs=stmt.executeQuery(sql);  %﹥  ﹤!--將二級欄目信息保存到數組subcat中--﹥  ﹤script. type=text/javascript﹥  var onecount;  onecount=0;  subcat = new Array();          ﹤%          int count = 0;          while(rs.next()){          %﹥  subcat[﹤%=count%﹥] = new Array(﹤%=rs.getString(NclassName)%﹥,  ﹤%=rs.getString(NclassId)%﹥,﹤%=rs.getString(parentId)%﹥);          ﹤%          count++;          }          rs.close();          %﹥  onecount=﹤%=count%﹥;  ﹤!--決定select顯示的函數--﹥  function changelocation(locationid)      {      document.myform.NclassId.length = 0;       var locationidlocationid=locationid;      var i;      for (i=0;i ﹤ onecount; i++)          {              if (subcat[i][2] == locationid)              {                  document.myform.NclassId.options[document.myform.NclassId.length] = new  Option(subcat[i][0], subcat[i][1]);              }                 }               }     ﹤/script﹥   ﹤FORM. method=POST name=myform. action=adminsave.jsp?action=add﹥    ﹤TABLE﹥          ﹤TR﹥        ﹤TD﹥一級分類﹤/TD﹥        ﹤TD﹥           ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options  [document.myform.classId.selectedIndex].value) size=1﹥            ﹤OPTION selected value﹥==請選一級分類==﹤/OPTION﹥          ﹤sql:query var=query dataSource=$﹥            SELECT * FROM class         ﹤/sql:query﹥  ﹤c:forEach var=row items=$﹥   ﹤option value=$﹥$﹤/option﹥  ﹤/c:forEach﹥  ﹤/select﹥        ﹤/TD﹥        ﹤TD﹥選擇二級分類﹤/TD﹥        ﹤TD﹥          ﹤SELECT name=NclassId﹥            ﹤OPTION selected value﹥==請選二級分類==﹤/OPTION﹥          ﹤/SELECT﹥        ﹤/TD﹥      ﹤/TR﹥  ﹤/TABLE﹥     ﹤/FORM﹥  ﹤/BODY﹥  ﹤/HTML﹥

到此，相信大家對“如何用JSP+JavaScript實現二級級聯下拉菜單”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！