Question

以下是我的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";
    }

Answer 1

我担心你的问题没有简单的解决办法。您应该考虑使用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);
      }
    });
  });
});

如何使用下拉列表中选择的值过滤c：forEach给出的结果？

1 个答案: