JSP页面中如何用select标签实现级联
做查询页面，查询条件比较多的时候往往会涉及到级联。举个简单的例子，拿教务系统来说，我们要查询教学计划信息，查询条件是入学批次、学生层次（专升本、高升专）、专业、课程。
它们之间有什么级联关系呢？入学批次影响学生层次（某个入学批次可能只有专升本或者高升专一个学生层次）、专业、课程，学生层次影响专业、课程，专业又影响课程。也就是说当选择入学批次时，学生层次、专业和课程的下拉框会局部刷新，选择学生层次时，专业和课程的下拉框会局部刷新，选择专业时，课程的下拉框也会局部刷新。
我们当然不希望已经选择的操作随着页面的刷新又被初始化，再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。
笔者的填充方法是通过提交js，由controller获取数据，将数据传到辅助的jsp页面，再用回调函数将辅助jsp页面中的数据填充给相应下拉框。说的抽象，直接上代码了，四级级联稍微麻烦一些，知道原理后也好做，笔者上三级级联的代码。级联样式如下图：
jsp页面代码：
<table>
<tr>
<td width="400px" align="left">入学批次：<select name="grade"
id="grade" onchange="refreshedulevelandspecialajax();"> //选择入学批次会刷新层次和专业
<option value="0">
--请选择--
<c:foreach items="${gradeinfo}" var="gradeinfo">
<option value="${gradeinfo.gradename}">${gradeinfo.gradename}
</c:foreach>
</select></td>
<td width="400px" align="left">统考课程：<select
name="uniexamcourseid" id="uniexamcourseid">
<option value="0">
--请选择--
<c:foreach items="${unifiedexamcourselist}" var="uniexamcourse">
<option value="${uniexamcourse.id}">${uniexamcourse.uniexamcoursename}
</c:foreach>
</select></td>
</tr>
<tr>
<td colspan="2" id="refreshedulevelandspecialajax"> //设置id，用于填充层次和专业的下拉框
<table>
<tr>
<td width="400" align="left">层 次：<select
name="edulevelid" id="edulevelid"
onchange="refreshspecialajax();"> //选择层次后刷新专业
<option value="0">--请选择--</option>
<c:foreach items="${educationlevel}" var="educationlevel">
<option value="${educationlevel.id}">${educationlevel.educationlevelname}
</c:foreach>
</select></td>
<td width="400" align="left" id="refreshspecialajax">专 业：<select //设置id，用于填充专业的下拉框
name="specialid" id="specialid">
<option value="0">--请选择--</option>
<c:foreach items="${speciallist}" var="special">
<option value="${special.id}">${special.specialname}
</c:foreach>
</select></td>
</tr>
</table>
</td>
</tr>
</table>
js的代码如下：
//javascript document
var xmlhttp; //用于保存xmlhttprequest对象的全局变量
//用于创建xmlhttprequest对象
function createxmlhttp() {
//根据window.xmlhttprequest对象是否存在使用不同的创建方式
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest(); //firefox、opera等浏览器支持的创建方式
} else {
xmlhttp = new activexobject("microsoft.xmlhttp");//ie浏览器支持的创建方式
}
}
function refreshedulevelandspecialajax() {
var grade = document.getelementbyid("grade").value;
refreshedulevelandspecial(grade);
}
function refreshedulevelandspecial(grade) {
createxmlhttp(); //创建xmlhttprequest对象
xmlhttp.onreadystatechange = refreshedulevelandspecialelement; //设置回调函数
xmlhttp.open("post", "edulevelandspecialbygradenameinspecialdetail",
true); //发送post请求
xmlhttp.setrequestheader("content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("grade=" + grade);
}
//处理服务器返回的信息 更新层次专业下拉框
function refreshedulevelandspecialelement() {
if (xmlhttp.readystate == 4) {
if (xmlhttp.status == 200) {
//此处xmlhttp.responsetext是请求的*controller的某个方法返回的渲染页面的源代码
document.getelementbyid("refreshedulevelandspecialajax").innerhtml = xmlhttp.responsetext;
}
}
}
function refreshspecialajax() {
var grade = document.getelementbyid("grade").value;
var edulevelid = document.getelementbyid("edulevelid").value;
refreshspecial(grade, edulevelid);
}
function refreshspecial(grade, edulevelid) {
createxmlhttp(); //创建xmlhttprequest对象
xmlhttp.onreadystatechange = refreshspecialelement; //设置回调函数
xmlhttp.open("post", "specialbygradenameandedulevelidinspecialdetail",
true); //发送post请求
xmlhttp.setrequestheader("content-type",
"application/x-www-form-urlencoded");
xmlhttp.send("grade=" + grade + "&edulevelid=" + edulevelid);
}
//处理服务器返回的信息 更新专业下拉框
function refreshspecialelement() {
if (xmlhttp.readystate == 4) {
if (xmlhttp.status == 200) {
//此处xmlhttp.responsetext是请求的*controller的某个方法返回的渲染页面的源代码
document.getelementbyid("refreshspecialajax").innerhtml = xmlhttp.responsetext;
}
}
}
controller代码：
@requestmapping(value = "/edulevelandspecialbygradenameinspecialdetail")
public modelandview getedulevelandspecialbygradenameinspecialdetail(httpservletrequest request,
httpservletresponse response) throws jsonparseexception, jsonmappingexception, jsonexception, ioexception{
string gradename=request.getparameter("grade");
string edulevelid=request.getparameter("edulevelid");
if(gradename==null||gradename.equals("0")){
gradename="null";
}
if(edulevelid==null||edulevelid.equals("0")){
edulevelid="null";
}
arraylist<utilobject> edulevellist=uess.getedulevelidbygradenameinspecialdetail(gradename);
arraylist<utilobject> specialidlist=uess.getspecialidbygradenameandedulevelidinspecialdetail(gradename, edulevelid);
mav.addobject("educationlevel", edulevellist);
mav.addobject("speciallist", specialidlist);
mav.setviewname("scoremanage/uniexamscore/edulevelandspecialajax");
return mav;
}
@requestmapping(value = "/specialbygradenameandedulevelidinspecialdetail", method = requestmethod.post)
public modelandview getspecialbygradenameandedulevelidinspecialdetail(httpservletrequest request,
httpservletresponse response) throws jsonparseexception, jsonmappingexception, jsonexception, ioexception{
string gradename=request.getparameter("grade");
string edulevelid=request.getparameter("edulevelid");
system.out.println("grade:"+gradename+" edulevelid:"+edulevelid);
if(gradename==null||gradename.equals("0")){
gradename="null";
}
if(edulevelid==null||edulevelid.equals("0")){
edulevelid="null";
}
arraylist<utilobject> speciallist=uess.getspecialidbygradenameandedulevelidinspecialdetail(gradename, edulevelid);
mav.addobject("speciallist", speciallist);
mav.setviewname("scoremanage/uniexamscore/specialajax");
return mav;
}
后台代码没有给出来，但应该看得懂，就是获取后台数据传到edulevelandspecialajax.jsp和specialajax.jsp页面。这两个页面用于填充原页面，通过id来填充相应区域，两个页面代码如下。
edulevelandspecialajax.jsp辅助页面：
<td id="refreshedulevelandspecialajax"> //id用于填充原页面
<table>
<tr>
<td width="400px" align="left">层 次：<select
id="edulevelid" name="edulevelid" onchange="refreshspecialajax();">
<option value="0">--请选择--</option>
<c:foreach items="${educationlevel}" var="educationlevel">
<option value="${educationlevel.id}">${educationlevel.name}</option>
</c:foreach>
</select></td>
<td width="400px" align="left" id="refreshspecialajax">专 业：<select //id用于填充原页面
name="specialid" id="specialid">
<option value="0">--请选择--</option>
<c:foreach items="${speciallist}" var="special">
<option value="${special.id}">${special.name}
</c:foreach>
</select></td>
</tr>
</table>
</td>
specialajax.jsp辅助页面：
<td width="400" align="left" id="refreshspecialajax">专 业：<select
name="specialid" id="specialid"> //id用于填充原页面
<option value="0">--请选择--</option>
<c:foreach items="${speciallist}" var="special">
<option value="${special.id}">${special.name}
</c:foreach>
</select></td>
这样就在jsp页面实现了填充。