Главная страница>Учебник по сетевому программированию>Учебное пособие по JSP

Создайте двухуровневое каскадное раскрывающееся меню, используя JSP+JavaScript.

Автор：Eve Cole Время обновления：2009-07-03 17:02:24

JSP+JavaScript создает каскадное раскрывающееся меню второго уровня:

class (информация о столбце первого уровня): classId (автоматическая нумерация), className (имя столбца), Nclass (информация о вторичном столбце), NclassId (автоматическая нумерация), NclassName ( имя столбца), ParentId (идентификатор столбца первого уровня, связанный с 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><ГОЛОВКА> 
<META http-equiv=Content-Type content=text/html charset=gb2312>; 

<TITLE>Каскадное меню</TITLE> 
<LINK rel=тип таблицы стилей=text/css href=style.css> 
</HEAD> 
<!--Получить информацию о вторичном столбце из базы данных--> 
<%String sql=select * из порядка Nclass по NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Сохраните информацию вторичного столбца в подкатегории массива--> 
<тип сценария=текст/javascript> 
вар onecount; 
одинсчет = 0; 
подкат = новый массив (); 
        <% 
        число интервалов = 0; 
        в то время как (rs.next ()) { 
        %> 
subcat[<%=count%>] = новый массив(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        считать++; 
        } 
        рс.закрыть(); 
        %> 
onecount=<%=count%>; 
<!--Функция, определяющая выбор отображения --> 
функция изменения местоположения (идентификатор местоположения) 
    { 
    document.myform.NclassId.length = 0; 

    вар locationid = locationid; 
    вар я; 
    для (я=0;я <onecount; я++) 
        { 
            if (subcat[i][2] == идентификатор местоположения) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = новый 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</скрипт> 

<Метод FORM=имя POST=myform action=adminsave.jsp?action=add> 
  <ТАБЛИЦА> 
   
    <ТР> 
      <TD>Классификация первого уровня</TD> 
      <ТД>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <Выбранное значение OPTION>==Пожалуйста, выберите категорию первого уровня==</OPTION> 
        <sql:query var=запрос dataSource=$> 
          ВЫБРАТЬ * ИЗ класса 
       </sql:запрос> 
<c:forEach var=row items=$> 
 <option value=$>$</option> 
</c:forEach> 
</выбрать> 
      </ТД> 
      <TD>Выберите дополнительную категорию</TD> 
      <ТД> 
        <SELECT name=NclassId> 
          <выбранное значение OPTION>==Пожалуйста, выберите категорию второго уровня==</OPTION> 
        </ВЫБРАТЬ> 
      </ТД> 
    </TR> 
</ТАБЛИЦА> 
  
</ФОРМ> 
</ТЕЛО> 
</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><ГОЛОВКА> 
<META http-equiv=Content-Type content=text/html charset=gb2312>; 

<TITLE>Каскадное меню</TITLE> 
<LINK rel=тип таблицы стилей=text/css href=style.css> 
</HEAD> 
<!--Получить информацию о вторичном столбце из базы данных--> 
<%String sql=select * из порядка Nclass по NclassId asc; 
ResultSet rs=stmt.executeQuery(sql); 
%> 
<!--Сохраните информацию вторичного столбца в подкатегории массива--> 
<тип сценария=текст/javascript> 
вар onecount; 
одинсчет = 0; 
подкат = новый массив (); 
        <% 
        число интервалов = 0; 
        в то время как (rs.next ()) { 
        %> 
subcat[<%=count%>] = новый массив(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>); 
        <% 
        считать++; 
        } 
        рс.закрыть(); 
        %> 
onecount=<%=count%>; 
<!--Функция, определяющая выбор отображения --> 
функция изменения местоположения (идентификатор местоположения) 
    { 
    document.myform.NclassId.length = 0; 

    вар locationid = locationid; 
    вар я; 
    для (я=0;я <onecount; я++) 
        { 
            if (subcat[i][2] == идентификатор местоположения) 
            { 
                document.myform.NclassId.options[document.myform.NclassId.length] = новый 
Option(subcat[i][0], subcat[i][1]); 
            }        
        } 
        
    }    
</скрипт> 

<Метод FORM=имя POST=myform action=adminsave.jsp?action=add> 
  <ТАБЛИЦА> 
   
    <ТР> 
      <TD>Классификация первого уровня</TD> 
      <ТД>  
        <SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1> 
          <Выбранное значение OPTION>==Пожалуйста, выберите категорию первого уровня==</OPTION> 
        <sql:query var=запрос dataSource=$> 
          ВЫБРАТЬ * ИЗ класса 
       </sql:запрос> 
<c:forEach var=row items=$> 
 <option value=$>$</option> 
</c:forEach> 
</выбрать> 
      </ТД> 
      <TD>Выберите дополнительную категорию</TD> 
      <ТД> 
        <SELECT name=NclassId> 
          <выбранное значение OPTION>==Пожалуйста, выберите категорию второго уровня==</OPTION> 
        </ВЫБРАТЬ> 
      </ТД> 
    </TR> 
</ТАБЛИЦА> 
  
</ФОРМ> 
</ТЕЛО> 
</HTML>
Связанные статьи