用JSP+JavaScript打造二级级联下拉菜单

goodluck

<p >JSP+JavaScript打造二级级联下拉菜单： <p ><p >class(一级栏目信息）：classId(自动编号），className（栏目名称）, Nclass（二级栏目信息）, NclassId（自动编号），NclassName(栏目名称），parentId（一级栏目id，与class表中的classId关联） <p ><p ><CENTER><ccid_nobr><table width="400" border="1" cellspacing="0" cellpadding="2"  bordercolorlight = "black" bordercolordark = "#FFFFFF" align="center"><tr><td bgcolor="e6e6e6" class="code" ><pre><ccid_code>&lt;%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %&gt; &lt;%@ include file=../conn.jsp%&gt; &lt;%@ include file=../ds.jsp%&gt; &lt;%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %&gt; &lt;%request.setCharacterEncoding(gb2312); %&gt; &lt;HTML&gt;&lt;HEAD&gt; &lt;META http-equiv=Content-Type content=text/html; charset=gb2312&gt; &lt;TITLE&gt;级联菜单&lt;/TITLE&gt; &lt;LINK rel=stylesheet type=text/css href=style.css&gt; &lt;/HEAD&gt; &lt;!--从数据库中得到二级栏目信息--&gt; &lt;%String sql=select * from Nclass order by NclassId asc; ResultSet rs=stmt.executeQuery(sql); %&gt; &lt;!--将二级栏目信息保存到数组subcat中--&gt; &lt;script type=text/javascript&gt; var onecount; onecount=0; subcat = new Array();         &lt;%         int count = 0;         while(rs.next()){         %&gt; subcat[&lt;%=count%&gt;] = new Array(&lt;%=rs.getString(NclassName)%&gt;,&lt;%=rs.getString(NclassId)%&gt;,&lt;%=rs.getString(parentId)%&gt;);         &lt;%         count++;         }         rs.close();         %&gt; onecount=&lt;%=count%&gt;; &lt;!--决定select显示的函数--&gt; function changelocation(locationid)     {     document.myform.NclassId.length = 0;     var locationid=locationid;     var i;     for (i=0;i &lt; onecount; i++)         {             if (subcat[2] == locationid)             {                 document.myform.NclassId.options[document.myform.NclassId.length] = new Option(subcat[0], subcat[1]);             }                }             }    &lt;/script&gt; &lt;FORM method=POST name=myform action=adminsave.jsp?action=add&gt;   &lt;TABLE&gt;        &lt;TR&gt;       &lt;TD&gt;一级分类&lt;/TD&gt;       &lt;TD&gt;          &lt;SELECT name=classId onChange=changelocation(document.myform.classId.options[document.myform.classId.selectedIndex].value) size=1&gt;           &lt;OPTION selected value&gt;==请选一级分类==&lt;/OPTION&gt;         &lt;sql:query var=query dataSource=$&gt;           SELECT * FROM class        &lt;/sql:query&gt; &lt;c:forEach var=row items=$&gt;  &lt;option value=$&gt;$&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt;       &lt;/TD&gt;       &lt;TD&gt;选择二级分类&lt;/TD&gt;       &lt;TD&gt;         &lt;SELECT name=NclassId&gt;           &lt;OPTION selected value&gt;==请选二级分类==&lt;/OPTION&gt;         &lt;/SELECT&gt;       &lt;/TD&gt;     &lt;/TR&gt; &lt;/TABLE&gt;   &lt;/FORM&gt; &lt;/BODY&gt; &lt;/HTML&gt;&lt;%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %&gt; &lt;%@ include file=../conn.jsp%&gt; &lt;%@ include file=../ds.jsp%&gt; &lt;%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %&gt; &lt;%request.setCharacterEncoding(gb2312); %&gt; &lt;HTML&gt;&lt;HEAD&gt; &lt;META http-equiv=Content-Type content=text/html; charset=gb2312&gt; &lt;TITLE&gt;级联菜单&lt;/TITLE&gt; &lt;LINK rel=stylesheet type=text/css href=style.css&gt; &lt;/HEAD&gt; &lt;!--从数据库中得到二级栏目信息--&gt; &lt;%String sql=select * from Nclass order by NclassId asc; ResultSet rs=stmt.executeQuery(sql); %&gt; &lt;!--将二级栏目信息保存到数组subcat中--&gt; &lt;script type=text/javascript&gt; var onecount; onecount=0; subcat = new Array();         &lt;%         int count = 0;         while(rs.next()){         %&gt; subcat[&lt;%=count%&gt;] = new Array(&lt;%=rs.getString(NclassName)%&gt;,&lt;%=rs.getString(NclassId)%&gt;,&lt;%=rs.getString(parentId)%&gt;);         &lt;%         count++;         }         rs.close();         %&gt; onecount=&lt;%=count%&gt;; &lt;!--决定select显示的函数--&gt; function changelocation(locationid)     {     document.myform.NclassId.length = 0;     var locationid=locationid;     var i;     for (i=0;i &lt; onecount; i++)         {             if (subcat[2] == locationid)             {                 document.myform.NclassId.options[document.myform.NclassId.length] = new Option(subcat[0], subcat[1]);             }                }             }    &lt;/script&gt; &lt;FORM method=POST name=myform action=adminsave.jsp?action=add&gt;   &lt;TABLE&gt;        &lt;TR&gt;       &lt;TD&gt;一级分类&lt;/TD&gt;       &lt;TD&gt;          &lt;SELECT name=classId onChange=changelocation(document.myform.classId.options[document.myform.classId.selectedIndex].value) size=1&gt;           &lt;OPTION selected value&gt;==请选一级分类==&lt;/OPTION&gt;         &lt;sql:query var=query dataSource=$&gt;           SELECT * FROM class        &lt;/sql:query&gt; &lt;c:forEach var=row items=$&gt;  &lt;option value=$&gt;$&lt;/option&gt; &lt;/c:forEach&gt; &lt;/select&gt;       &lt;/TD&gt;       &lt;TD&gt;选择二级分类&lt;/TD&gt;       &lt;TD&gt;         &lt;SELECT name=NclassId&gt;           &lt;OPTION selected value&gt;==请选二级分类==&lt;/OPTION&gt;         &lt;/SELECT&gt;       &lt;/TD&gt;     &lt;/TR&gt; &lt;/TABLE&gt;   &lt;/FORM&gt; &lt;/BODY&gt; &lt;/HTML&gt;</ccid_code></pre></td></tr></table></ccid_nobr></CENTER><p ><p >（责任编辑：董建伟）                                 <p align="center"></p></p>