您所在位置：主题：用JSP+JavaScript打造二级级联下拉菜单 无法调式出来求助.
yongheng520
[专家分：30] 发布于 2008-02-21 11:49:00
请教大家
1,这是在网上找到的用JSP+JavaScript打造二级级联下拉菜单的代码例子,我是在eclips里面编辑,首先发现没双引好,经修改后可以显示.修改后的见后面有贴出来.
2,修改成自己数据库后能显示第一个下拉菜单的内容,但是点了后第二个菜单没反映,我知道自己写得不对,但是原代码这个有地方也看不明白,比如:
<SELECT name=classId onChange=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>
这段代码看不懂是什么意思,里面的sql语句不能用啊,是不是格式上有问题.我自己改了下,可以显示我要的内容,但是点了后第二菜单没反映.
小弟弟是想调通来学习,请大家指导下.谢谢.
<%@ 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 locationid=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 onChange=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>
[color=FF0000][size=6]自己修改后的:[/size][/color]
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="sqljava.*"%>
<%@ page import="java.sql.*"%>
<HTML><HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>????</TITLE>
<LINK rel=stylesheet type=text/css href=style.css>
</HEAD>
<!--?????????????-->
<%
gzglsql p=new gzglsql();
ResultSet rs1=p.kscx();
String sql="select * from tb_ndtask order by ID asc";
ResultSet rs=p.fy(sql);
%>
<script type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array (<%=rs.getString("ID")%>,<%=rs.getString("Ndrwxh")%>,
<%=rs.getString("Ndgzrw")%>,<%=rs.getString("Ndrwks")%>,<%=rs.getString("Ndrwsj")%>,
<%=rs.getString("Zrr")%>,<%=rs.getString("Bz")%>);
<%
count++;
}
%>
onecount=<%=count%>;
<!--??select?????-->
function changelocation(locationid)
{
document.myform.Ksmc.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i )
{
if (subcat[i][2] == locationid)
{
document.myform.Ksmc.options[document.myform.Ksmc.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" onChange="changelocation(document.myform.Ksmc.options
[document.myform.Ksmc.selectedIndex].value)" size="1">
<option selected="selected"></option>
<%while(rs1.next()){%>
<option value=<%=rs1.getString("Ksmc")%>> <%=rs1.getString("Ksmc")%> </option>
<%}%>
</select></font></td>
</TD>
<OPTION selected value>==请选一级分类==</OPTION>
<sql:query var=query dataSource=$>
SELECT * FROM tb_ksname
</sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
</TD>
<TD>??????</TD>
<TD>
<SELECT name="ID">
<OPTION selected value>==??????==</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
1,这是在网上找到的用JSP+JavaScript打造二级级联下拉菜单的代码例子,我是在eclips里面编辑,首先发现没双引好,经修改后可以显示.修改后的见后面有贴出来.
2,修改成自己数据库后能显示第一个下拉菜单的内容,但是点了后第二个菜单没反映,我知道自己写得不对,但是原代码这个有地方也看不明白,比如:
<SELECT name=classId onChange=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>
这段代码看不懂是什么意思,里面的sql语句不能用啊,是不是格式上有问题.我自己改了下,可以显示我要的内容,但是点了后第二菜单没反映.
小弟弟是想调通来学习,请大家指导下.谢谢.
<%@ 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 locationid=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 onChange=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>
[color=FF0000][size=6]自己修改后的:[/size][/color]
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="sqljava.*"%>
<%@ page import="java.sql.*"%>
<HTML><HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>????</TITLE>
<LINK rel=stylesheet type=text/css href=style.css>
</HEAD>
<!--?????????????-->
<%
gzglsql p=new gzglsql();
ResultSet rs1=p.kscx();
String sql="select * from tb_ndtask order by ID asc";
ResultSet rs=p.fy(sql);
%>
<script type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array (<%=rs.getString("ID")%>,<%=rs.getString("Ndrwxh")%>,
<%=rs.getString("Ndgzrw")%>,<%=rs.getString("Ndrwks")%>,<%=rs.getString("Ndrwsj")%>,
<%=rs.getString("Zrr")%>,<%=rs.getString("Bz")%>);
<%
count++;
}
%>
onecount=<%=count%>;
<!--??select?????-->
function changelocation(locationid)
{
document.myform.Ksmc.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i )
{
if (subcat[i][2] == locationid)
{
document.myform.Ksmc.options[document.myform.Ksmc.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" onChange="changelocation(document.myform.Ksmc.options
[document.myform.Ksmc.selectedIndex].value)" size="1">
<option selected="selected"></option>
<%while(rs1.next()){%>
<option value=<%=rs1.getString("Ksmc")%>> <%=rs1.getString("Ksmc")%> </option>
<%}%>
</select></font></td>
</TD>
<OPTION selected value>==请选一级分类==</OPTION>
<sql:query var=query dataSource=$>
SELECT * FROM tb_ksname
</sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
</TD>
<TD>??????</TD>
<TD>
<SELECT name="ID">
<OPTION selected value>==??????==</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
