打造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如何构建二级级联下拉菜单的方法，具体实现之后是不是很好呢？对JSP JavaScript开发设计是不是有帮助呢？

【编辑推荐】

1. 对JSP中的内置对象简单概述
2. JSP入门之网站环境搭建的步骤
3. JSP导出Oracle数据表的操作浅谈
4. 在JSP中实现页面跳转
5. 什么是JSP以及和Servlet的比较