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