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