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

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

}

回答:

恐怕没有简单的解决方案可以解决您的问题。您应该考虑使用ajax更新在服务器端进行操作。客户端过滤可能需要您从studentList生成的HTML中解析数据,也可能需要将数据作为JSON格式的数组注入。在这两种情况下,您最终都会获得两倍的数据(服务器和客户端)。在客户端拥有数据只会允许您禁用某些选项值,而不能隐藏它们。因此,如果您希望在不显示某些选项的情况下进行真正的过滤,则应在服务器上过滤列表。为此,您应该将所选选项从第一个下拉列表“

byCollege”发布到后端,以便检索用于重建“ byDept”复选框的过滤后的“ uniqueDeptList”。

脚步:

$("#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给出的结果? 的全部内容, 来源链接: utcz.com/qa/410676.html

回到顶部