您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“如何用JSP+JavaScript實現(xiàn)二級級聯(lián)下拉菜單”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何用JSP+JavaScript實現(xiàn)二級級聯(lián)下拉菜單”吧!
那么我們開始JSP+JavaScript打造二級級聯(lián)下拉菜單:
打造JSP JavaScript二級級聯(lián)下拉菜單之變量的的定義:
◆class(一級欄目信息):
◆classId(自動編號)
◆className(欄目名稱)
◆Nclass(二級欄目信息)
◆NclassId(自動編號)
◆NclassName(欄目名稱)
◆parentId(一級欄目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二級級聯(lián)下拉菜單之級聯(lián)菜單制作
﹤HTML﹥﹤HEAD﹥ ﹤META. http-equiv=Content-Type content=text/html; charset=gb2312﹥ ﹤TITLE﹥級聯(lián)菜單﹤/TITLE﹥ ﹤LINK rel=stylesheet type=text/css href=style.css﹥ ﹤/HEAD﹥
◆從數(shù)據(jù)庫中得到二級欄目信息
﹤%String sql=select * from Nclass order by NclassId asc; ResultSet rs=stmt.executeQuery(sql); %﹥
◆將二級欄目信息保存到數(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二級級聯(lián)菜單的制作
﹤FORM. method=POST name=myform. action=adminsave.jsp?action=add﹥ ﹤TABLE﹥ ﹤TR﹥ ﹤TD﹥一級分類﹤/TD﹥ ﹤TD﹥ ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options [document.myform.classId.selectedIndex].value) size=1﹥ ﹤OPTION selected value﹥==請選一級分類==﹤/OPTION﹥ ﹤sql:query var=query dataSource=$﹥ SELECT * FROM class ﹤/sql:query﹥ ﹤c:forEach var=row items=$﹥ ﹤option value=$﹥$﹤/option﹥ ﹤/c:forEach﹥ ﹤/select﹥ ﹤/TD﹥ ﹤TD﹥選擇二級分類﹤/TD﹥ ﹤TD﹥ ﹤SELECT name=NclassId﹥ ﹤OPTION selected value﹥==請選二級分類==﹤/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﹥級聯(lián)菜單﹤/TITLE﹥ ﹤LINK rel=stylesheet type=text/css href=style.css﹥ ﹤/HEAD﹥ ﹤!--從數(shù)據(jù)庫中得到二級欄目信息--﹥ ﹤%String sql=select * from Nclass order by NclassId asc; ResultSet rs=stmt.executeQuery(sql); %﹥ ﹤!--將二級欄目信息保存到數(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﹥一級分類﹤/TD﹥ ﹤TD﹥ ﹤SELECT name=classId nChange=changelocation(document.myform.classId.options [document.myform.classId.selectedIndex].value) size=1﹥ ﹤OPTION selected value﹥==請選一級分類==﹤/OPTION﹥ ﹤sql:query var=query dataSource=$﹥ SELECT * FROM class ﹤/sql:query﹥ ﹤c:forEach var=row items=$﹥ ﹤option value=$﹥$﹤/option﹥ ﹤/c:forEach﹥ ﹤/select﹥ ﹤/TD﹥ ﹤TD﹥選擇二級分類﹤/TD﹥ ﹤TD﹥ ﹤SELECT name=NclassId﹥ ﹤OPTION selected value﹥==請選二級分類==﹤/OPTION﹥ ﹤/SELECT﹥ ﹤/TD﹥ ﹤/TR﹥ ﹤/TABLE﹥ ﹤/FORM﹥ ﹤/BODY﹥ ﹤/HTML﹥
到此,相信大家對“如何用JSP+JavaScript實現(xiàn)二級級聯(lián)下拉菜單”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。