打造JSP+JavaScript二級(jí)級(jí)聯(lián)下拉菜單
作者：佚名
在使用JSP JavaScript過程中有很多的技巧與實(shí)現(xiàn)，那么如何構(gòu)建二級(jí)級(jí)聯(lián)下拉菜單呢，本文將會(huì)向你做一個(gè)源碼上的介紹。
那么我們開始JSP+JavaScript打造二級(jí)級(jí)聯(lián)下拉菜單：
打造JSP JavaScript二級(jí)級(jí)聯(lián)下拉菜單之變量的的定義：
◆class(一級(jí)欄目信息)：
◆classId(自動(dòng)編號(hào))
◆className(欄目名稱)
◆Nclass(二級(jí)欄目信息)
◆NclassId(自動(dòng)編號(hào))
◆NclassName(欄目名稱)
◆parentId(一級(jí)欄目id，與class表中的classId關(guān)聯(lián))
- ﹤%@ 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); %﹥
打造JSP+JavaScript二級(jí)級(jí)聯(lián)下拉菜單之級(jí)聯(lián)菜單制作
- ﹤HTML﹥﹤HEAD﹥
- ﹤META. http-equiv=Content-Type content=text/html; charset=gb2312﹥
- ﹤TITLE﹥級(jí)聯(lián)菜單﹤/TITLE﹥
- ﹤LINK rel=stylesheet type=text/css href=style.css﹥
- ﹤/HEAD﹥
◆從數(shù)據(jù)庫(kù)中得到二級(jí)欄目信息
- ﹤%String sql=select * from Nclass order by NclassId asc;
- ResultSet rs=stmt.executeQuery(sql);
- %﹥
◆將二級(jí)欄目信息保存到數(shù)組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%﹥;
◆決定Select顯示的函數(shù)
- function changelocation(locationid)
- {
- document.myform.NclassId.length = 0;
- var locationidlocationid=locationid;
- var i;
- for (i=0;i ﹤ onecount; i++)
- {
- if (subcat[i][2] == locationid)
- {
- document.myform.NclassId.options[document.myform.NclassId.length] = new
- Option(subcat[i][0], subcat[i][1]);
- }
- }
- }
- ﹤/script﹥
◆JSP JavaScript二級(jí)級(jí)聯(lián)菜單的制作
- ﹤FORM. method=POST name=myform. action=adminsave.jsp?action=add﹥
- ﹤TABLE﹥
- ﹤TR﹥
- ﹤TD﹥一級(jí)分類﹤/TD﹥
- ﹤TD﹥
- ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options
- [document.myform.classId.selectedIndex].value) size=1﹥
- ﹤OPTION selected value﹥==請(qǐng)選一級(jí)分類==﹤/OPTION﹥
- ﹤sql:query var=query dataSource=$﹥
- SELECT * FROM class
- ﹤/sql:query﹥
- ﹤c:forEach var=row items=$﹥
- ﹤option value=$﹥$﹤/option﹥
- ﹤/c:forEach﹥
- ﹤/select﹥
- ﹤/TD﹥
- ﹤TD﹥選擇二級(jí)分類﹤/TD﹥
- ﹤TD﹥
- ﹤SELECT name=NclassId﹥
- ﹤OPTION selected value﹥==請(qǐng)選二級(jí)分類==﹤/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; charset=gb2312﹥
- ﹤TITLE﹥級(jí)聯(lián)菜單﹤/TITLE﹥
- ﹤LINK rel=stylesheet type=text/css href=style.css﹥
- ﹤/HEAD﹥
- ﹤!--從數(shù)據(jù)庫(kù)中得到二級(jí)欄目信息--﹥
- ﹤%String sql=select * from Nclass order by NclassId asc;
- ResultSet rs=stmt.executeQuery(sql);
- %﹥
- ﹤!--將二級(jí)欄目信息保存到數(shù)組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%﹥;
- ﹤!--決定select顯示的函數(shù)--﹥
- function changelocation(locationid)
- {
- document.myform.NclassId.length = 0;
- var locationidlocationid=locationid;
- var i;
- for (i=0;i ﹤ onecount; i++)
- {
- if (subcat[i][2] == locationid)
- {
- document.myform.NclassId.options[document.myform.NclassId.length] = new
- Option(subcat[i][0], subcat[i][1]);
- }
- }
- }
- ﹤/script﹥
- ﹤FORM. method=POST name=myform. action=adminsave.jsp?action=add﹥
- ﹤TABLE﹥
- ﹤TR﹥
- ﹤TD﹥一級(jí)分類﹤/TD﹥
- ﹤TD﹥
- ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options
- [document.myform.classId.selectedIndex].value) size=1﹥
- ﹤OPTION selected value﹥==請(qǐng)選一級(jí)分類==﹤/OPTION﹥
- ﹤sql:query var=query dataSource=$﹥
- SELECT * FROM class
- ﹤/sql:query﹥
- ﹤c:forEach var=row items=$﹥
- ﹤option value=$﹥$﹤/option﹥
- ﹤/c:forEach﹥
- ﹤/select﹥
- ﹤/TD﹥
- ﹤TD﹥選擇二級(jí)分類﹤/TD﹥
- ﹤TD﹥
- ﹤SELECT name=NclassId﹥
- ﹤OPTION selected value﹥==請(qǐng)選二級(jí)分類==﹤/OPTION﹥
- ﹤/SELECT﹥
- ﹤/TD﹥
- ﹤/TR﹥
- ﹤/TABLE﹥
- ﹤/FORM﹥
- ﹤/BODY﹥
- ﹤/HTML﹥
以上就是使用JSP JavaScript如何構(gòu)建二級(jí)級(jí)聯(lián)下拉菜單的方法，具體實(shí)現(xiàn)之后是不是很好呢？對(duì)JSP JavaScript開發(fā)設(shè)計(jì)是不是有幫助呢？
【編輯推薦】
責(zé)任編輯：仲衡
來源：
開發(fā)學(xué)院
