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); %>
<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>
<%@ 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>
|
闽公网安备 35060202000074号