下面是我的jsp代码。
<c:forEach items="${nameList}" var="studentList">
<tr>
<td style="padding-bottom: .5em;">
<a id="student" href="number?regNo=<c:out value="${studentList.regNo}"/>">
<span class="eachStudent">
<span class="studentName"><c:out value="${studentList.name}"/></span><br/>
<span class="collName"><c:out value="${studentList.collName}"/></span><br/>
<span class="deptName"><c:out value="${studentList.deptName}"/></span><br/>
</span>
</a>
</td>
</tr>
</c:forEach>
上述c:forEach
列出了
Name CollName DeptName
ABCD coll1 dept1
kfkdb coll1 dept2
jbdd coll2 dept3
以下代码分别列出了collName
和deptName
。
<div>
Filter students by College (not required):
<select id="byCollege" name="byCollege" >
<c:forEach items="${uniqueCollList}" var="uniqueCollList">
<option value="${uniqueCollList}"/>
${uniqueCollList}</option >
</c:forEach >
</select >
</div>
<div>
Filter students by Department Name (not required):
<select id="byDept" name="byDept" >
<c:forEach items="${uniqueDeptList}" var="uniqueDeptList">
<option value="${uniqueDeptList}"/>
${uniqueDeptList}</option >
</c:forEach >
</select >
</div>
现在,当我从第一个下拉列表中选择一个值时,我想使用下拉列表中所选的值来过滤foreach
给出的结果。我想在前端本身做这件事,而不是去后端。我可以知道我该怎么做吗?
在使用第一个下拉列表的值过滤c:foreach
结果后,如果我在第二个下拉列表中选择了一个值,我希望使用第二个下降列表中选择的值来过滤c:foreach
的更新结果。
我该怎么做?
如果我想在后台做这件事,我该怎么办?
PS:以下是第一次发送列表的控制器代码
@RequestMapping(value = "/name", method = RequestMethod.POST, params = { "studentName" })
public String searchStudentByCollOrDept(@RequestParam(value = "studentName", required = true)String studentName, ModelMap model){
List<OneStudentResult> nameList = resultService.getStudentList(studentName);
//TODO, null value check.
if(nameList.size() == 0 || nameList == null){
return "header";
}
if(nameList.size() != 0){
// Iterate the list that we get and add only one time a collName and deptname.So a Treeset.
Set<String> uniqueCollList = new TreeSet<String>();
Iterator<OneStudentResult> itr = nameList.iterator();
while(itr.hasNext()){
String collName = itr.next().getCollName();
if(!uniqueCollList.contains(collName)){
uniqueCollList.add(collName);
}
}
uniqueCollList.add(" Select a College ");
model.addAttribute("uniqueCollList", uniqueCollList);
Set<String> uniqueDeptList = new TreeSet<String>();
Iterator<OneStudentResult> itrDeptList = nameList.iterator();
while(itrDeptList.hasNext()){
String deptName = itrDeptList.next().getDeptName();
if(!uniqueDeptList.contains(deptName)){
uniqueDeptList.add(deptName);
}
}
uniqueDeptList.add(" Select a Department ");
model.addAttribute("uniqueDeptList", uniqueDeptList);
}
model.addAttribute("nameList", nameList);
return "nameResult";
}
恐怕您的问题没有简单的解决方案。您应该考虑使用ajax更新在服务器端执行此操作。客户端过滤要么需要解析studentList生成的HTML中的数据,要么需要将数据注入JSON格式的数组。在这两种情况下,您最终都会得到双倍的数据(服务器和客户端)。将数据放在客户端只允许禁用某些选项值,而不允许隐藏它们。因此,如果你想在不显示某些选项的情况下进行真正的过滤,那么你应该在服务器上过滤你的列表。为此,您应该将第一个下拉列表"byCollege"中的选定选项发布到后端,以便检索用于重建"byDept"复选框的过滤后的"uniqueDeptList"。您可能希望对这两项任务都使用jQuery。
步骤:
1.处理"byCollege"下拉列表的更改事件
2.将所选选项值发布到servlet
3.过滤servlet中的数据,并将过滤后的数据作为POST响应返回(本例中省略)
4.删除旧的选择选项,并从过滤后的数据中重新创建它们
$("#byCollege").change(function() {
$("select option:selected").first().each(function() {
// Get and convert the data for sending
// Example: This variable contains the selected option-text
var outdata = $(this).text();
// Send the data as an ajax POST request
$.ajax({
url: "yourjsonservlet",
type: 'POST',
dataType: 'json',
data: JSON.stringify(outdata),
contentType: 'application/json',
mimeType: 'application/json',
success: function(data) {
// Remove old select options from the DOM
$('#byCollege')
.find('option')
.remove()
.end();
// Parse data and append new select options
//(omitted here; e.g. $('#byCollege').append($("<option>").attr(...))
},
error: function(data, status, er) {
alert("error: " + data + " status: " + status + " er:" + er);
}
});
});
});