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>

//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;
 }
 }
}

@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;
 }

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

<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页面中如何用select标签如何实现级联。节俭意味着更少的购物，更少的购买欲，和留下更少的脚印。这些都与简约的生活息息相关。更多关于JSP页面中如何用select标签如何实现级联请关注haodaima.com其它相关文章！