那么我們開始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如何構建二級級聯下拉菜單的方法，具體實現之后是不是很好呢？對JSP JavaScript開發設計是不是有幫助呢？

【編輯推薦】

1. 對JSP中的內置對象簡單概述
2. JSP入門之網站環境搭建的步驟
3. JSP導出Oracle數據表的操作淺談
4. 在JSP中實現頁面跳轉
5. 什么是JSP以及和Servlet的比較