Как фильтровать результат, заданный c: forEach, используя значение, выбранное в раскрывающемся списке?

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. Фильтрация на стороне клиента потребует, чтобы вы анализировали данные из HTML, сгенерированные вашим студентом, или потребовали, чтобы вы ввели данные в виде массива в формате JSON. В обоих случаях вы получите вдвое данные (сервер &). Наличие данных на стороне клиента позволит вам отключить некоторые значения параметров, а не скрывать их. Поэтому, если вам нужна настоящая фильтрация с точки зрения отсутствия некоторых параметров, вы должны фильтровать свои списки на сервере. Для этого вы должны опубликовать выбранную опцию из первого раскрывающегося списка «byCollege» на ваш сервер, чтобы получить отфильтрованный «uniqueDeptList», который вы используете для перестройки «byDept». Вы можете использовать jQuery для обеих задач.

Шаги:

1. Ручка изменения-событие в раскрывающемся списке "byCollege"

2. Post выбранное значение опции для вашего сервлета

3. Фильтр данных в вашем сервлетах и ​​вернуть отфильтрованные данные как ответ 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); 
 
     } 
 
    }); 
 
    }); 
 
});