如何使用下拉列表中选择的值过滤c:forEach给出的结果? [英] How can I filter the result given by c:forEach using the value selected in a drop down?
问题描述
以下是我的jsp代码.
Following is my jsp code.
<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的代码.
Following is the code that lists the collName and deptName respectively.
<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给出的结果.我想在前端本身中进行此操作，而不是在后端中进行.我可以知道该怎么做吗?
Now when I select a value from first dropdown, I want to filter the results given by foreach using the value selected in dropdown. I would like to do this in front end itself, rather going to the back end. May I know how can I do this?
使用第一个下拉列表的值过滤c:foreach结果后，如果我在第二个下拉列表中选择一个值，则希望使用第二个下拉列表中选择的值过滤c:foreach的更新结果.
After filtering the c:foreach result using value of first dropdown, if I select a value in second dropdown, I want the updated result of c:foreach to be filtered using the value selected in second drop down.
我该怎么做?
如果我想在后端执行此操作，该怎么办?
If I want to do this in back end, what should I do?
PS:以下是首次发送列表的控制器代码
PS:Following is the controller code that sends the list first time
@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.
I'm afraid there is no simple solution to your problem. You should consider doing this server-side with ajax updates. Client side filtering would either require you to parse the data from the HTML generated by your studentList or it would require you to inject the data as a JSON formatted array. In both cases you would end up with doubled data (server & client). Having the data on the client-side would only allow you to disable some of the option values, not hide them. So if you want real filtering in terms of not-showing some of the options then you should filter your lists on the server. To do so you should post the selected option from your first dropdown "byCollege" to your backend in order to retrieve a filtered "uniqueDeptList" that you use to rebuild the "byDept" checkbox. You might want to use jQuery for both tasks.
步骤:
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);
}
});
});
});
这篇关于如何使用下拉列表中选择的值过滤c:forEach给出的结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
