JSP页面中用select标签实现级联

做查询页面，查询条件比较多的时候往往会涉及到级联。举个简单的例子，拿教务系统来说，我们要查询教学计划信息，查询条件是入学批次、学生层次（专升本、高升专）、专业、课程。

它们之间有什么级联关系呢？入学批次影响学生层次（某个入学批次可能只有专升本或者高升专一个学生层次）、专业、课程，学生层次影响专业、课程，专业又影响课程。也就是说当选择入学批次时，学生层次、专业和课程的下拉框会局部刷新，选择学生层次时，专业和课程的下拉框会局部刷新，选择专业时，课程的下拉框也会局部刷新。

我们当然不希望已经选择的操作随着页面的刷新又被初始化，再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。

笔者的填充方法是通过提交JS，由Controller获取数据，将数据传到辅助的JSP页面，再用回调函数将辅助JSP页面中的数据填充给相应下拉框。说的抽象，直接上代码了，四级级联稍微麻烦一些，知道原理后也好做，笔者上三级级联的代码。级联样式如下图：

JSP页面中用select标签实现级联

JSP页面代码：

<table>

<tr>

<td width="400px" align="left">入学批次：<SELECT NAME="grade"

id="grade" οnchange="refreshEduLevelAndSpecialAjax();"> //选择入学批次会刷新层次和专业

--请选择--

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

--请选择--

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

οnchange="refreshSpecialAjax();"> //选择层次后刷新专业

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

<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" οnchange="refreshSpecialAjax();">

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

<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用于填充原页面

<c:forEach items="${specialList}" var="special">

<OPTION VALUE="${special.id}">${special.name}

</c:forEach>

</SELECT></td>

这样就在JSP页面实现了填充。

JSP页面中用select标签实现级联

继续阅读

关于Gradle配置的小结

Java小案例——随机数猜测随机数猜测

nginx location中斜线的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的简单使用

neo4j之cypher使用文档

GitHub连夜封杀！这份阿里 10W 字内部 Java 字面试手册到底有多强？

spark/scala关于【资源文件】加载方法概述外部文件加载方案测试资源文件打包入jar包中小结

mybatis_入门程序Mybatis入门

AOP编程_Android优雅权限框架(1)概念基础，2021金三银四前言正文大纲正文

Effective Java 8:通用程序设计

OOM三种类型

工厂模式-三种类型

【递归】高效率求2的n次幂

win10本地scala和spark安装安装scala安装spark

scala (3) Function 和 Method