以下是我的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清单
c:forEach
Name CollName DeptName ABCD coll1 dept1 kfkdb coll1 dept2 jbdd coll2 dept3
以下是分别列出collName和的代码deptName。
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使用在下拉列表中选择的值来过滤给出的结果。我想在前端本身中进行此操作,而不是在后端中进行。我可以知道该怎么做吗?
foreach
在c: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”。
脚步:
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); } }); }); });