如何用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实现二级级联下拉菜单”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！