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);