Página Inicial>Tutorial de programação de redes>Tutorial JSP

Crie um menu suspenso em cascata de dois níveis usando JSP+JavaScript

Autor：Eve Cole Data da Última Atualização：2009-07-03 17:02:24

JSP + JavaScript cria um menu suspenso em cascata de segundo nível:

class (informações da coluna de primeiro nível): classId (numeração automática), className (nome da coluna), Nclass (informações da coluna secundária), NclassId (numeração automática), NclassName ( nome da coluna), parentId (id da coluna de primeiro nível, associado ao classId na tabela de classes)

 

<%@ page contentType=text/html charset=GB2312 idioma=java errorPage=../error.jsp %> 
<%@incluir arquivo=../conn.jsp%> 
<%@incluir arquivo=../ds.jsp%> 
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %> 
<%request.setCharacterEncoding(gb2312%>); 
<HTML><HEAD> 
<META http-equiv=Tipo de conteúdo content=text/html charset=gb2312> 

<TITLE>Menu em cascata</TITLE> 
<LINK rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Obter informações da coluna secundária do banco de dados--> 
<%String sql=select * da ordem Nclass por NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Salve as informações da coluna secundária no array subcat--> 
<tipo de script=texto/javascript> 
var uma contagem; 
uma contagem = 0; 
subcat = new Array(); 
        <% 
        contagem interna = 0; 
        enquanto(rs.next()){ 
        %> 
subcat[<%=count%>] = new Array(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        contar++; 
        } 
        rs.close(); 
        %> 
umaconta=<%=conta%>; 
<!--Função que determina a exibição selecionada--> 
função alterarlocalização(locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var locationid=localid; 
    var eu; 
    para (i=0;i < uma contagem; i++) 
        { 
            if (subcat[i][2] == ID de localização) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = novo 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<Método FORM = nome POST = meu formulário action = adminsave.jsp?action = add> 
  <TABELA> 
   
    <TR> 
      <TD>Classificação de primeiro nível</TD> 
      <TD>  
        <SELECT nome=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].valor) tamanho=1> 
          <OPTION selected value>==Selecione uma categoria de primeiro nível==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECIONE * DA turma 
       </sql:consulta> 
<c:forEach var=linha itens=$> 
 <opção valor=$>$</option> 
</c:forEach> 
</selecionar> 
      </TD> 
      <TD>Selecione uma categoria secundária</TD> 
      <TD> 
        <SELECIONE nome=NclassId> 
          <OPTION valor selecionado>==Selecione a categoria de segundo nível==</OPTION> 
        </SELECIONAR> 
      </TD> 
    </TR> 
</TABELA> 
  
</FORM> 
</BODY> 
</HTML>
<%@ page contentType=text/html charset=GB2312 idioma=java errorPage=../error.jsp %> 
<%@incluir arquivo=../conn.jsp%> 
<%@incluir arquivo=../ds.jsp%> 
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %> 
<%request.setCharacterEncoding(gb2312%>); 
<HTML><HEAD> 
<META http-equiv=Tipo de conteúdo content=text/html charset=gb2312> 

<TITLE>Menu em cascata</TITLE> 
<LINK rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Obter informações da coluna secundária do banco de dados--> 
<%String sql=select * da ordem Nclass por NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Salve as informações da coluna secundária no array subcat--> 
<tipo de script=texto/javascript> 
var uma contagem; 
uma contagem = 0; 
subcat = new Array(); 
        <% 
        contagem interna = 0; 
        enquanto(rs.next()){ 
        %> 
subcat[<%=count%>] = new Array(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        contar++; 
        } 
        rs.close(); 
        %> 
umaconta=<%=conta%>; 
<!--Função que determina a exibição selecionada--> 
função alterarlocalização(locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var locationid=localid; 
    var eu; 
    para (i=0;i < uma contagem; i++) 
        { 
            if (subcat[i][2] == ID de localização) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = novo 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<Método FORM = nome POST = meu formulário action = adminsave.jsp?action = add> 
  <TABELA> 
   
    <TR> 
      <TD>Classificação de primeiro nível</TD> 
      <TD>  
        <SELECT nome=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].valor) tamanho=1> 
          <OPTION selected value>==Selecione uma categoria de primeiro nível==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECIONE * DA turma 
       </sql:consulta> 
<c:forEach var=linha itens=$> 
 <opção valor=$>$</option> 
</c:forEach> 
</selecionar> 
      </TD> 
      <TD>Selecione uma categoria secundária</TD> 
      <TD> 
        <SELECIONE nome=NclassId> 
          <OPTION valor selecionado>==Selecione a categoria de segundo nível==</OPTION> 
        </SELECIONAR> 
      </TD> 
    </TR> 
</TABELA> 
  
</FORM> 
</BODY> 
</HTML>
Artigos Relacionados