JSP+JavaScript crea un menú desplegable en cascada de segundo nivel:
clase (información de columna de primer nivel): classId (numeración automática), className (nombre de columna), Nclass (información de columna secundaria), NclassId (numeración automática), NclassName ( nombre de columna), parentId (id de columna de primer nivel, asociado con classId en la tabla de clases)
<%@ tipo de contenido de página=text/html charset=GB2312 language=java errorPage=../error.jsp %>
<%@ incluir archivo=../conn.jsp%>
<%@ incluir archivo=../ds.jsp%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312 %>);
<HTML><CABEZAL>
<META http-equiv=Tipo de contenido content=text/html charset=gb2312>
<TITLE>Menú en cascada</TITLE>
<ENLACE rel=tipo de hoja de estilo=texto/css href=estilo.css>
</CABEZA>
<!--Obtener información de la columna secundaria de la base de datos-->
<%String sql=select * del orden Nclass por NclassId asc;
Conjunto de resultados rs=stmt.executeQuery(sql);
%>
<!--Guarde la información de la columna secundaria en la matriz subcat-->
<tipo de script=texto/javascript>
var un recuento;
una cuenta=0;
subcat = nueva matriz();
<%
recuento int = 0;
mientras(rs.siguiente()){
%>
subcat[<%=count%>] = nueva matriz(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>);
<%
contar++;
}
rs.cerrar();
%>
onecount=<%=count%>;
<!--Función que determina la visualización seleccionada-->
función cambiar ubicación (ubicaciónid)
{
documento.myform.NclassId.length = 0;
var ID de ubicación = ID de ubicación;
var i;
para (i=0;i < una cuenta; i++)
{
si (subcat[i][2] == ID de ubicación)
{
document.myform.NclassId.options[document.myform.NclassId.length] = nuevo
Opción(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<Método FORM=POST nombre=miformulario acción=adminsave.jsp?action=add>
<TABLA>
<TR>
<TD>Clasificación de primer nivel</TD>
<TD>
<SELECCIONAR nombre=classId onChange=cambiar ubicación(document.myform.classId.options
[document.myform.classId.selectedIndex].valor) tamaño=1>
<OPCIÓN valor seleccionado>==Por favor seleccione una categoría de primer nivel==</OPCIÓN>
<sql:consulta var=consulta fuente de datos=$>
SELECCIONAR * DE la clase
</sql:consulta>
<c:forEach var=elementos de fila=$>
<valor de opción=$>$</opción>
</c:paraCada>
</seleccionar>
</TD>
<TD>Seleccione una categoría secundaria</TD>
<TD>
<SELECCIONAR nombre=NclassId>
<OPCIÓN valor seleccionado>==Por favor seleccione la categoría de segundo nivel==</OPCIÓN>
</SELECCIONAR>
</TD>
</TR>
</TABLA>
</FORM>
</CUERPO>
</HTML>
<%@ tipo de contenido de página=text/html charset=GB2312 language=java errorPage=../error.jsp %>
<%@ incluir archivo=../conn.jsp%>
<%@ incluir archivo=../ds.jsp%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312 %>);
<HTML><CABEZAL>
<META http-equiv=Tipo de contenido content=text/html charset=gb2312>
<TITLE>Menú en cascada</TITLE>
<ENLACE rel=tipo de hoja de estilo=texto/css href=estilo.css>
</CABEZA>
<!--Obtener información de la columna secundaria de la base de datos-->
<%String sql=select * del orden Nclass por NclassId asc;
Conjunto de resultados rs=stmt.executeQuery(sql);
%>
<!--Guarde la información de la columna secundaria en la matriz subcat-->
<tipo de script=texto/javascript>
var un recuento;
una cuenta=0;
subcat = nueva matriz();
<%
recuento int = 0;
mientras(rs.siguiente()){
%>
subcat[<%=count%>] = nueva matriz(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>);
<%
contar++;
}
rs.cerrar();
%>
onecount=<%=count%>;
<!--Función que determina la visualización seleccionada-->
función cambiar ubicación (ubicaciónid)
{
documento.myform.NclassId.length = 0;
var ID de ubicación = ID de ubicación;
var i;
para (i=0;i < una cuenta; i++)
{
si (subcat[i][2] == ID de ubicación)
{
document.myform.NclassId.options[document.myform.NclassId.length] = nuevo
Opción(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<Método FORM=POST nombre=miformulario acción=adminsave.jsp?action=add>
<TABLA>
<TR>
<TD>Clasificación de primer nivel</TD>
<TD>
<SELECCIONAR nombre=classId onChange=cambiar ubicación(document.myform.classId.options
[document.myform.classId.selectedIndex].valor) tamaño=1>
<OPCIÓN valor seleccionado>==Por favor seleccione una categoría de primer nivel==</OPCIÓN>
<sql:consulta var=consulta fuente de datos=$>
SELECCIONAR * DE la clase
</sql:consulta>
<c:forEach var=elementos de fila=$>
<valor de opción=$>$</opción>
</c:paraCada>
</seleccionar>
</TD>
<TD>Seleccione una categoría secundaria</TD>
<TD>
<SELECCIONAR nombre=NclassId>
<OPCIÓN valor seleccionado>==Por favor seleccione la categoría de segundo nivel==</OPCIÓN>
</SELECCIONAR>
</TD>
</TR>
</TABLA>
</FORM>
</CUERPO>
</HTML> |