1、script腳本
//Ajax實現下拉框二級級聯，根據第一個下拉框的值改變第二個下拉框內的列表
//根據瀏覽器的類型，創建xmlHttpRequest對象
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if( window.XMLHttpRequest())
{
return new XMLHttpRequest();
}
}
var xmlHttpRequest;
//異步響應函數,搜索專業
function searchMajor(para)
{
var url="majorSearch.action?para="+para; //後臺請求的路徑
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callbackMajor; //將回調函數註冊給狀態改變事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//異步響應函數,搜索班級號
function searchClass(para)
{
var url="classSearch.action?para="+para; //後臺請求的路徑
xmlHttpRequest=createXmlHttpRequest();
xmlHttpRequest.onreadystatechange=callbackClass; //將回調函數註冊給狀態改變事件
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
//回調函數,得到搜索班級號結果
function callbackClass()
{
var c_num=document.getElementById("c_num");
//請求被成功響應，已接收到結果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的結果字符串
var classArray= result.split(","); //返回的結果字符串中，值之間是以,分隔的，所以先拆分成數組
var count = classArray.length;
c_num.length=0; //先將下拉列表框清空
for (var i = 0; i <count; i++)
{
c_num.options.add(new Option(classArray[i+1], classArray[i])); //將結果循環添加到下拉列表中
i++;
}
if(classArray[count-1] == ""){
c_num.length=0; //先將下拉列表框清空
c_num.options.add(new Option("暫無班級分類",""));
}
}
else
{
c_num.length=0;
c_num.options.add(new Option("暫無班級分類",""));
}
}
//回調函數,得到搜索專業結果
function callbackMajor()
{
var major=document.getElementById("major");
//請求被成功響應，已接收到結果
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)
{
var result=xmlHttpRequest.responseText; //返回的結果字符串
var majorArray= result.split(","); //返回的結果字符串中，值之間是以,分隔的，所以先拆分成數組
var count = majorArray.length;
major.length=0; //先將下拉列表框清空
for (var i = 0; i <count; i++)
{
major.options.add(new Option(majorArray[i+1], majorArray[i])); //將結果循環添加到下拉列表中
i++;
}
if(majorArray[count-1] == ""){
major.length=0; //先將下拉列表框清空
major.options.add(new Option("暫無專業分類",""));
}
}
else
{
major.length=0;
major.options.add(new Option("暫無專業分類",""));
}
}
//下拉框改變事件 1
function changeMajorOptions()
{
var academy = document.getElementById("academy");
if(academy.value != "")
{
searchMajor(academy.value);
}
return;
}
//下拉框改變事件 2
function changeClassOptions(){
var major = document.getElementById("major").value;
if(major != ""){
searchClass(major);
}
}
2、jsp頁面
<td height="30" align="right">院系班級：</td>
<td>
<select name="academy" id="academy" onblur="changeMajorOptions()">
<c:if test="${empty alist}">
<option value="">暫無註冊班級</option>
</c:if>
<c:if test="${!empty alist}">
<c:forEach items="${alist}" var="academy">
<option value="${academy.m_id}">${academy.m_name}</option>
</c:forEach>
</c:if>
</select>
<select name="major" id="major" onblur="changeClassOptions()">
<option value="">請選擇專業</option>
</select>
<select name="c_num" id="c_num">
<option value="">請選擇班級</option>
</select>
</td>
3、MajorListAction類實現（ClassListAction同理）
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
int para = Integer.parseInt(request.getParameter("para"));
IUserIndexBusiness iuib = BusinessIndexFactory.getUserIndexBusiness();
List<MajorValue> mlist = iuib.getMajorList(para);
String result = "";
if(mlist!=null&&mlist.size()>0){
result = ""+mlist.get(0).getM_id();
result += ","+mlist.get(0).getM_name();
for(int i=1;i<mlist.size();i++){
result += ","+mlist.get(i).getM_id();
result += ","+mlist.get(i).getM_name();
}
}
response.getWriter().write(result);
本文出自 “未來不是夢” 博客