在開發項目中，經常會遇到大小類的問題，即有兩個下拉框,一個爲主,一個爲次,如果主下拉框選擇更新後根據所選擇的項從數據庫中讀取相關數據並更新到次下拉框中.比如主下拉框爲大類,次下拉框爲大類下的選項,並且頁面是沒有提交的。
思路是在打開頁面時就要所有的大類和小類都從數據庫中取出，把所有的小類組裝成一個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]);
}
}
//alert(locationid);
}
</script>
<TR>
<TD align=middle width=68>小 類</TD>
<TD width=682> <select name="detailtype">
<option value="">--請先選擇大類--</option>
</select>
</TD></TR>
</TBODY></TABLE>
</BODY>
轉自：北天JAVA技術網(www.java114.com)
