JSP页面中如何用select标签实现级联
来源：
中文源码网 浏览：154 次 日期：2024-05-12 20:06:11
【下载文档: JSP页面中如何用select标签实现级联.txt 】
JSP页面中如何用select标签实现级联
做查询页面，查询条件比较多的时候往往会涉及到级联。举个简单的例子，拿教务系统来说，我们要查询教学计划信息，查询条件是入学批次、学生层次（专升本、高升专）、专业、课程。
它们之间有什么级联关系呢？入学批次影响学生层次（某个入学批次可能只有专升本或者高升专一个学生层次）、专业、课程，学生层次影响专业、课程，专业又影响课程。也就是说当选择入学批次时，学生层次、专业和课程的下拉框会局部刷新，选择学生层次时，专业和课程的下拉框会局部刷新，选择专业时，课程的下拉框也会局部刷新。
我们当然不希望已经选择的操作随着页面的刷新又被初始化，再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。
笔者的填充方法是通过提交JS，由Controller获取数据，将数据传到辅助的JSP页面，再用回调函数将辅助JSP页面中的数据填充给相应下拉框。说的抽象，直接上代码了，四级级联稍微麻烦一些，知道原理后也好做，笔者上三级级联的代码。级联样式如下图：
JSP页面代码：复制代码 代码如下:
| 入学批次： | 统考课程： |
//设置ID，用于填充层次和专业的下拉框 | 层 次： | 专 业： | |
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
eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName); ArrayList 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 specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId); mav.addObject("specialList", specialList); mav.setViewName("scoreManage/uniExamScore/specialAjax"); return mav; }后台代码没有给出来，但应该看得懂，就是获取后台数据传到eduLevelAndSpecialAjax.jsp和specialAjax.jsp页面。这两个页面用于填充原页面，通过ID来填充相应区域，两个页面代码如下。eduLevelAndSpecialAjax.jsp辅助页面：复制代码 代码如下: //ID用于填充原页面 | 层 次： | 专 业： | | specialAjax.jsp辅助页面：复制代码 代码如下:专 业： | 这样就在JSP页面实现了填充。
