JSP+JavaScript를 사용하여 2단계 계단식 드롭다운 메뉴 만들기

저자：Eve Cole 업데이트 시간：2009-07-02 17:08:24

JSP+JavaScript는 두 번째 수준 계단식 드롭다운 메뉴를 생성합니다.

class(첫 번째 수준 열 정보): classId(자동 번호 매기기), className(열 이름), Nclass(보조 열 정보), NclassId(자동 번호 매기기), NclassName( 열 이름) , parentId(클래스 테이블의 classId와 연결된 첫 번째 수준 열 ID)

<%@ 페이지 contentType=text/html; charset=GB2312 언어=java errorPage=../error.jsp %>
<%@ 포함 파일=../conn.jsp%>
<%@ 포함 파일=../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; charset=gb2312>

<TITLE>계단식 메뉴</TITLE>
<LINK rel=stylesheet type=text/css href=style.css>
</HEAD>

<%String sql=NclassId asc에 의한 Nclass 순서에서 * 선택;
ResultSet rs=stmt.executeQuery(sql);
%>

<스크립트 유형=텍스트/자바스크립트>
var onecount;
원카운트=0;
subcat = 새로운 배열();
<%
정수 개수 = 0;
동안(rs.next()){
%>
subcat[<%=count%>] = 새로운 배열(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>);
<%
카운트++;
}
rs.close();
%>
onecount=<%=count%>;

함수 변경위치(locationid)
{
document.myform.NclassId.length = 0;

var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == 위치 ID)
{
document.myform.NclassId.options[document.myform.NclassId.length] = 신규
Option(subcat[i][0], subcat[i][1]);
}
}

}
</script>

<FORM method=POST name=myform action=adminsave.jsp?action=add>
<표>

<TR>
<TD>1차 분류</TD>
<TD>
<SELECT 이름=classId onChange=changelocation(document.myform.classId.options)
[document.myform.classId.selectedIndex].value) 크기=1>
<OPTION 선택된 값>==첫 번째 수준 카테고리를 선택하세요==</OPTION>
<sql:query var=쿼리 데이터소스=$>
SELECT * FROM 클래스
</sql:쿼리>
<c:forEach var=행 항목=$>
<옵션 값=$>$</option>
</c:forEach>
</select>
</TD>
<TD>보조 카테고리 선택</TD>
<TD>
<SELECT 이름=NclassId>
<OPTION 선택 값>==두 번째 수준 카테고리를 선택하세요==</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>

</FORM>
</BODY>
</HTML>
<%@ 페이지 contentType=text/html; charset=GB2312 언어=java errorPage=../error.jsp %>
<%@ 포함 파일=../conn.jsp%>
<%@ 포함 파일=../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; charset=gb2312>