網頁下拉框聯動，即第一個下拉框內容改變，則與之聯動的另一個下拉框的內容也隨之改變。這個功能javascript（以下簡稱js）或者jsp都可以實現，不過根據筆者經驗，除非萬不得已，能夠利用js實現的話就儘量不要使用jsp，因爲js是靜態語言，執行不需要和服務器聯繫 ，不論在速度上還是穩定性上都有很大的優越性。下面就以js實現之。
下拉框的條目內容如果是事先確定的並且數量較少，那麼可以事先定義兩個數組，將下拉框的條目內容存進去，爲了實現上的方便，你可以利用下標對照進行存儲，當然，你也可以用別的方法，只要可以做到第一級下拉框和二級的條目對應起來就行了。我們以下標對照存儲爲例。
比方說第一級下拉框的內容爲A,B,C;當選定A時，二級下拉框內容爲11，22，33，選定B時，二級下拉框內容爲44，55，66，選定C時，二級下拉框內容爲77，88，99；這樣的話我們定義的兩個數組爲：
var quanbu1 = new Array(A,A,A,B,B,B,C,C,C);
var quanbu2 = new Array(11,22,33,44,55,66,77,88,99);
但是其實大部分情況的聯動下拉框中的條目是從數據庫中取出來的，這個時候就需要先從數據庫中取出數據，然後再將所有的條目內容放到這兩個靜態數組中去，以後的聯動就不需要刷新頁面，完全是js靜態的了。利用jsp連接數據庫並且取數據這裏就不細說了，反正取出來的是一個resultset，假設名字是rs，下面就是將rs中的數據放入靜態數組的語句，這裏一級和二級下拉框條目放在rs的第一、第三列。
<script language="JavaScript" type="text/JavaScript">
var quanbu1 = new Array();
var quanbu2 = new Array();
<%
int i = 0;
while(rs.next())
{
//初始化爲實現下拉列表聯動的靜態數組
%>
lenlen = <%= i + 1%>;//靜態數組長度
quanbu1[<%= i %>] = "<%= rs.getString(1).trim() %>";
quanbu2[<%= i %>] = "<%= rs.getString(3).trim() %>";
<%
i++;
}
%>
</script>
初始化下拉條目數組之後，你可以構造第一級和第二級下拉框了，這我就不細說了，你只要記着定義第一級它的onchage函數指向你定義的js函數就可以了，例如：
第一級下拉框：
<select name="hexi" οnchange="changelist();">
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
第二級下拉框：
<select name="cezhan" >
<option value='11'>11</option>
<option value='22'>22</option>
<option value='33'>33</option>
</select>
下面是實現聯動的changelist函數：
function changelist()
{ //取第一級下拉框當前內容
var first=document.formone.hexi.options[document.formone.hexi.selectedIndex].value;
var yumenlen;//二級下拉框條目數
var m = 0;
var n = 0;
while(quanbu1[n] != null){
if(quanbu1[n] == first){
yumen [m] = quanbu2[n];//構造當前二級下拉框條目內容數組
m++;
}
n++;
}
yumenlen = m;
parent.topFrame.document.all.cezhan.length=0;//清空二級下拉框條目
for(var i=0;i<yumenlen;i++)
{//構造下拉條目
var lastOption = document.createElement_x("OPTION");
document.all.cezhan.options.add(lastOption);
lastOption.innerText =yumen[i];
lastOption.value=yumen[i];
}
}
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,java.util.*,online.*" errorPage="" %>
<jsp:useBean id="DBConn" class="online.DBConn" scope="session"></jsp:useBean>
<%
DBConn db=new DBConn();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'MyJsp.jsp' starting page</title>
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
ResultSet rs = db.executeQuery("select * from chapter order by chapterID");//讀取數據
while(rs.next())
{
String P1=rs.getString("courseName");;//轉換字符類型
String P2=rs.getString("chapterName");
%>
subcat[<%=count%>] = new Array("<%=P2%>","<%=P1%>","<%=P2%>");//產生數組
<%
count = count + 1;
}
%>
onecount=<%=count%>;
function change(id)
{
document.form.P2.length = 0;
var id=id;
var i;
document.form.P2.options[0] = new Option('--選擇--','');
for (i=0;i < onecount; i++)
{
var p=subcat[i][1];
if(p==id)
{
document.form.P2.options[document.form.P2.length] = new Option(subcat[i][0], subcat[i][2]);
}
}
document.form.P2.focus();
}
</script>
</head>
<body>
<form name="form">
分類：
<select name="P1" onChange="change(document.form.P1.options[document.form.P1.selectedIndex].value)">
<option value="">--選擇--</option>
<%
String sql = "select * from course order by courseID asc";
ResultSet rs1 = db.executeQuery(sql);
while(rs1.next())
{
String P1=rs1.getString("courseName");
%>
<option value="<%=P1%>"><%=P1%></option>
<%
}
%>
</select>
<select name="P2" >
<option value="">==選擇==</option>
</select>
</form>
<%
db.close();
%>
</body>
</html>
