Page d'accueil>Tutoriel de programmation réseau>Tutoriel JSP

Créez un menu déroulant en cascade à deux niveaux à l'aide de JSP+JavaScript

Auteur：Eve Cole Date de mise à jour：2009-07-03 17:02:24

JSP+JavaScript crée un menu déroulant en cascade de deuxième niveau :

class (informations sur la colonne de premier niveau) : classId (numérotation automatique), className (nom de la colonne), Nclass (informations sur la colonne secondaire), NclassId (numérotation automatique), NclassName ( nom de la colonne), parentId (identifiant de la colonne de premier niveau, associé à classId dans la table de classe)

 

<%@ 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><TÊTE> 
<META http-equiv=Content-Type content=text/html; 

<TITLE>Menu en cascade</TITLE> 
<LIEN rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Obtenir les informations sur les colonnes secondaires de la base de données--> 
<%String sql=select * from Nclass order by NclassId asc ; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Enregistrez les informations de la colonne secondaire dans le sous-cat du tableau--> 
<type de script=texte/javascript> 
var un compte ; 
un compte = 0 ; 
sous-cat = nouveau tableau (); 
        <% 
        nombre entier = 0 ; 
        tandis que(rs.next()){ 
        %> 
subcat[<%=count%>] = nouveau tableau(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        compte++; 
        } 
        rs.close(); 
        %> 
onecount=<%=count%>; 
<!--Fonction qui détermine l'affichage sélectionné--> 
fonction changement d'emplacement (locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var emplacementid=emplacementid; 
    var je; 
    pour (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == emplacementid) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = nouveau 
Option(sous-cat[i][0], sous-cat[i][1]); 
            }        
        } 
        
    }    
</script> 

<FORM method=POST name=myform action=adminsave.jsp?action=add> 
  <TABLE> 
   
    <TR> 
      <TD>Classement de premier niveau</TD> 
      <TD>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <OPTION valeur sélectionnée>==Veuillez sélectionner une catégorie de premier niveau==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECT * FROM classe 
       </sql:requête> 
<c:forEach var=éléments de ligne=$> 
 <valeur d'option=$>$</option> 
</c:forEach> 
</sélectionner> 
      </TD> 
      <TD>Sélectionner une catégorie secondaire</TD> 
      <TD> 
        <SELECT nom=NclassId> 
          <OPTION valeur sélectionnée>==Veuillez sélectionner la catégorie de deuxième niveau==</OPTION> 
        </SELECT> 
      </TD> 
    </TR> 
</TABLE> 
  
</FORM> 
</CORPS> 
</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><TÊTE> 
<META http-equiv=Content-Type content=text/html; 

<TITLE>Menu en cascade</TITLE> 
<LIEN rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Obtenir les informations sur les colonnes secondaires de la base de données--> 
<%String sql=select * from Nclass order by NclassId asc ; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Enregistrez les informations de la colonne secondaire dans le sous-cat du tableau--> 
<type de script=texte/javascript> 
var un compte ; 
un compte = 0 ; 
sous-cat = nouveau tableau (); 
        <% 
        nombre entier = 0 ; 
        tandis que(rs.next()){ 
        %> 
subcat[<%=count%>] = nouveau tableau(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        compte++; 
        } 
        rs.close(); 
        %> 
onecount=<%=count%>; 
<!--Fonction qui détermine l'affichage sélectionné--> 
fonction changement d'emplacement (locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var emplacementid=emplacementid; 
    var je; 
    pour (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == emplacementid) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = nouveau 
Option(sous-cat[i][0], sous-cat[i][1]); 
            }        
        } 
        
    }    
</script> 

<FORM method=POST name=myform action=adminsave.jsp?action=add> 
  <TABLE> 
   
    <TR> 
      <TD>Classement de premier niveau</TD> 
      <TD>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <OPTION valeur sélectionnée>==Veuillez sélectionner une catégorie de premier niveau==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECT * FROM classe 
       </sql:requête> 
<c:forEach var=éléments de ligne=$> 
 <valeur d'option=$>$</option> 
</c:forEach> 
</sélectionner> 
      </TD> 
      <TD>Sélectionner une catégorie secondaire</TD> 
      <TD> 
        <SELECT nom=NclassId> 
          <OPTION valeur sélectionnée>==Veuillez sélectionner la catégorie de deuxième niveau==</OPTION> 
        </SELECT> 
      </TD> 
    </TR> 
</TABLE> 
  
</FORM> 
</CORPS> 
</HTML>
Articles connexes