JSP如何實現動態下拉框
阿新 • • 發佈：2019-02-14
在開發專案中，經常會遇到大小類的問題，即有兩個下拉框,一個為主,一個為次,如果主下拉框選擇更新後根據所選擇的項從資料庫中讀取相關資料並更新到次下拉框中.比如主下拉框為大類,次下拉框為大類下的選項,並且頁面是沒有提交的。
思路是在開啟頁面時就要所有的大類和小類都從資料庫中取出，把所有的小類組裝成一個javascript小類陣列(陣列結構為 Array("大類編號","小類編號","小類名稱"))，當大類改變時，啟用一個javascript函式從小類陣列中取出從屬於選中大類的所有小類，把其在小類下拉框顯示即可。
下面我介紹其具體做法:
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.sql.*,gbase.db.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<HTML>
<HEAD>
<TITLE>北天JAVA技術網</TITLE>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV align=center>
<CENTER>
<form name="main" method="post" action="article_save.jsp">
<TABLE id=AutoNumber1 style="FONT-SIZE: 10pt; BORDER-COLLAPSE: collapse"
borderColor=#c0c0c0 cellPadding=0 width=760 border=1>
<TBODY>
<TR>
<TD align=middle width=750 bgColor=#f2f2f2 colSpan=2>
</TD>
</TR>
<TR>
<TD align=middle width=68>大 類</TD>
<TD width=682> <select name="maintype" onChange="javaScript:changemaintype(document.main.maintype.options[document.main.maintype.selectedIndex].value);">
<!--下面的下拉框資料可以自己改成從資料庫讀出的-->
<option value="">--請選擇--</option>
<option value="1">JAVA技術</option>
<option value="2">設計研究</option>
<option value="3">資料庫技術</option>
<option value="4">專案開發</option>
<option value="5">最新技術</option>
</select>
</TD></TR>
<script language = "JavaScript">
var subcat1 = new Array();
<!--下面的陣列資料可以自己改成從資料庫讀出的,格式為Array("大類編號","小類編號","小類名稱"),如
int iCount = 0;
<%while(rs.next()){%>
subcat1[<%=iCount%>] = new Array("<%=rs.getString("bigtypeid")%>","<%=rs.getString("smalltypeid")%>","<%=rs.getString("smalltypemc")%>");
iCount++;
<%}%>
var js_count=iCount;
-->
subcat1[0] = new Array("1","1","jsp與servlet技術");
subcat1[1] = new Array("1","2","javascript技術");
subcat1[2] = new Array("1","4","javabean技術");
subcat1[3] = new Array("1","5","EJB技術");
subcat1[4] = new Array("1","6","web service技術");
subcat1[5] = new Array("1","7","應用伺服器技術");
subcat1[6] = new Array("1","9","JAVA綜合知識");
subcat1[7] = new Array("2","1","設計模式");
subcat1[8] = new Array("2","2","設計架構");
subcat1[9] = new Array("2","4","設計綜合知識");
subcat1[10] = new Array("3","1","MYSQL");
subcat1[11] = new Array("3","2","SQL Server");
subcat1[12] = new Array("3","3","Sybase");
subcat1[13] = new Array("3","4","Oracle");
subcat1[14] = new Array("3","5","DB2");
subcat1[15] = new Array("3","6","資料庫綜合知識");
subcat1[16] = new Array("4","1","專案開發");
subcat1[17] = new Array("5","1","最新技術");
var js_count=18;
function changemaintype(locationid)
{
document.main.detailtype.options[0] = new Option("--請選擇--", "");
document.main.detailtype.length = 1;
var locationid=locationid;
var ii;
for (ii=0;ii < js_count; ii++)
{
if ((subcat1[ii][0] == locationid))
{
document.main.detailtype.options[document.main.detailtype.length] = new Option(subcat1[ii][2], subcat1[ii][1]);
思路是在開啟頁面時就要所有的大類和小類都從資料庫中取出，把所有的小類組裝成一個javascript小類陣列(陣列結構為 Array("大類編號","小類編號","小類名稱"))，當大類改變時，啟用一個javascript函式從小類陣列中取出從屬於選中大類的所有小類，把其在小類下拉框顯示即可。
下面我介紹其具體做法:
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.sql.*,gbase.db.*" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.*" %>
<HTML>
<HEAD>
<TITLE>北天JAVA技術網</TITLE>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV align=center>
<CENTER>
<form name="main" method="post" action="article_save.jsp">
<TABLE id=AutoNumber1 style="FONT-SIZE: 10pt; BORDER-COLLAPSE: collapse"
borderColor=#c0c0c0 cellPadding=0 width=760 border=1>
<TBODY>
<TR>
<TD align=middle width=750 bgColor=#f2f2f2 colSpan=2>
</TD>
</TR>
<TR>
<TD align=middle width=68>大 類</TD>
<TD width=682> <select name="maintype" onChange="javaScript:changemaintype(document.main.maintype.options[document.main.maintype.selectedIndex].value);">
<!--下面的下拉框資料可以自己改成從資料庫讀出的-->
<option value="">--請選擇--</option>
<option value="1">JAVA技術</option>
<option value="2">設計研究</option>
<option value="3">資料庫技術</option>
<option value="4">專案開發</option>
<option value="5">最新技術</option>
</select>
</TD></TR>
<script language = "JavaScript">
var subcat1 = new Array();
<!--下面的陣列資料可以自己改成從資料庫讀出的,格式為Array("大類編號","小類編號","小類名稱"),如
int iCount = 0;
<%while(rs.next()){%>
subcat1[<%=iCount%>] = new Array("<%=rs.getString("bigtypeid")%>","<%=rs.getString("smalltypeid")%>","<%=rs.getString("smalltypemc")%>");
iCount++;
<%}%>
var js_count=iCount;
-->
subcat1[0] = new Array("1","1","jsp與servlet技術");
subcat1[1] = new Array("1","2","javascript技術");
subcat1[2] = new Array("1","4","javabean技術");
subcat1[3] = new Array("1","5","EJB技術");
subcat1[4] = new Array("1","6","web service技術");
subcat1[5] = new Array("1","7","應用伺服器技術");
subcat1[6] = new Array("1","9","JAVA綜合知識");
subcat1[7] = new Array("2","1","設計模式");
subcat1[8] = new Array("2","2","設計架構");
subcat1[9] = new Array("2","4","設計綜合知識");
subcat1[10] = new Array("3","1","MYSQL");
subcat1[11] = new Array("3","2","SQL Server");
subcat1[12] = new Array("3","3","Sybase");
subcat1[13] = new Array("3","4","Oracle");
subcat1[14] = new Array("3","5","DB2");
subcat1[15] = new Array("3","6","資料庫綜合知識");
subcat1[16] = new Array("4","1","專案開發");
subcat1[17] = new Array("5","1","最新技術");
var js_count=18;
function changemaintype(locationid)
{
document.main.detailtype.options[0] = new Option("--請選擇--", "");
document.main.detailtype.length = 1;
var locationid=locationid;
var ii;
for (ii=0;ii < js_count; ii++)
{
if ((subcat1[ii][0] == locationid))
{
document.main.detailtype.options[document.main.detailtype.length] = new Option(subcat1[ii][2], subcat1[ii][1]);