How can I filter the result given by c:forEach using the value selected in a drop down?

Question

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>

The above c:forEach lists

Name         CollName        DeptName
ABCD         coll1             dept1
kfkdb        coll1             dept2
jbdd         coll2             dept3

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>

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?

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.

How can I do this?

If I want to do this in back end, what should I do?

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

Answer 1

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.

Steps:

1. Handle the change-event of the "byCollege" dropdown

2. Post the selected option value to your servlet

3. Filter the data in your servlet and return the filtered data as POST response (omitted in this example)

4. Remove the old select options and recreate them from the filtered data

$("#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);
      }
    });
  });
});