Startseite>Tutorial zur Netzwerkprogrammierung>JSP-Tutorial

Erstellen Sie mit JSP+JavaScript ein zweistufiges kaskadierendes Dropdown-Menü

Autor：Eve Cole Aktualisierungszeit：2009-07-03 17:02:24

JSP+JavaScript erstellt ein kaskadierendes Dropdown-Menü der zweiten Ebene:

Klasse (Spalteninformationen der ersten Ebene): classId (automatische Nummerierung), className (Spaltenname), Nclass (sekundäre Spalteninformationen), NclassId (automatische Nummerierung), NclassName ( Spaltenname), parentId (Spalten-ID der ersten Ebene, verknüpft mit classId in der Klassentabelle)

 

<%@ 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; 

<TITLE>Kaskadierendes Menü</TITLE> 
<LINK rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Sekundäre Spalteninformationen aus der Datenbank abrufen--> 
<%String sql=select * from Nclass order by NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Speichern Sie die sekundären Spalteninformationen im Array 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%>; 
<!--Funktion, die die ausgewählte Anzeige bestimmt--> 
Funktion changelocation(locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var locationid=locationid; 
    var i; 
    für (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == locationid) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = neu 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<FORM method=POST name=myform action=adminsave.jsp?action=add> 
  <TABELLE> 
   
    <TR> 
      <TD>Klassifizierung der ersten Ebene</TD> 
      <TD>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <OPTION selected value>==Bitte wählen Sie eine Kategorie der ersten Ebene aus==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECT * FROM class 
       </sql:query> 
<c:forEach var=row items=$> 
 <option value=$>$</option> 
</c:forEach> 
</select> 
      </TD> 
      <TD>Wählen Sie eine sekundäre Kategorie aus</TD> 
      <TD> 
        <SELECT name=NclassId> 
          <OPTION selected value>==Bitte wählen Sie die Kategorie der zweiten Ebene aus==</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; 

<TITLE>Kaskadierendes Menü</TITLE> 
<LINK rel=stylesheet type=text/css href=style.css> 
</HEAD> 
<!--Sekundäre Spalteninformationen aus der Datenbank abrufen--> 
<%String sql=select * from Nclass order by NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Speichern Sie die sekundären Spalteninformationen im Array 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%>; 
<!--Funktion, die die ausgewählte Anzeige bestimmt--> 
Funktion changelocation(locationid) 
    { 
    document.myform.NclassId.length = 0; 

    var locationid=locationid; 
    var i; 
    für (i=0;i < onecount; i++) 
        { 
            if (subcat[i][2] == locationid) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = neu 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</script> 

<FORM method=POST name=myform action=adminsave.jsp?action=add> 
  <TABELLE> 
   
    <TR> 
      <TD>Klassifizierung der ersten Ebene</TD> 
      <TD>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <OPTION selected value>==Bitte wählen Sie eine Kategorie der ersten Ebene aus==</OPTION> 
        <sql:query var=query dataSource=$> 
          SELECT * FROM class 
       </sql:query> 
<c:forEach var=row items=$> 
 <option value=$>$</option> 
</c:forEach> 
</select> 
      </TD> 
      <TD>Wählen Sie eine sekundäre Kategorie aus</TD> 
      <TD> 
        <SELECT name=NclassId> 
          <OPTION selected value>==Bitte wählen Sie die Kategorie der zweiten Ebene aus==</OPTION> 
        </SELECT> 
      </TD> 
    </TR> 
</TABLE> 
  
</FORM> 
</BODY> 
</HTML>
Ähnliche Artikel