我在我的项目中使用Spring MVC。
我有一些表中的值列表，我在jsp中加载它们。使用
c：forEach var =“loan”items =“$ {loans}”JSTL标签，我正在为结果生成一个html表。
在该表中，我在每行显示两个下拉列表。他们是资助者和目的。这些下拉列表也来自表格。我正在写一个AJAX调用来填充基于资助者的Dropdown。
我有4个贷款价值。所以它的生成表有四行。在每4行中，它有资助者和目的的下拉列表。
问题是，如果我在一行中更改了资助者，它将填充所有4行中的所有目的下拉列表。
我想为每一行选择不同的资助者和不同的目的。任何人都可以给我一个正确的方法吗？
这是我的JSP
<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<script>
function myHome() {
var zoneId = $("#funderId").val();
$(".funder").val($("#funderId option:selected").text());
$("#purpose option").remove();
$("#purpose").append("<option value='0'>--Select--</option>");
$.ajax({
type : "GET",
url : "fundLoanDeatils.htm",
data : "PURPOSE_ACTION=Purpose&zoneId=" + zoneId,
success : function(data) {
flagZone = false;
var obj = jQuery.parseJSON(data);
var funderpurpose = obj.funderpurpose;
funderpurpose = funderpurpose
.substring(1, funderpurpose.length - 1);
funderpurpose = $.trim(funderpurpose);
if (funderpurpose != "") {
var regioncluserArray = funderpurpose.split(",");
var finalTemp = "";
if (regioncluserArray.length >= 1) {
for (var i = 0; i < regioncluserArray.length; i++) {
var regClusKeyVal = regioncluserArray[i].split("=");
var key = regClusKeyVal[0];
var value = regClusKeyVal[1];
if (value != 'undefined') {
var temp = "<option value='" + $.trim(key) + "'>"
+ value + "</option>";
}
finalTemp = finalTemp + temp;
}
if (finalTemp != "") {
$("#purpose").append(finalTemp);
}
}
}
var shouldUnblock = true;
},
});
}
</script>
<style type="text/css">
#login_block {
border: 1 !important;
width:auto !important;
padding: 10px;
}
</style>
<form id="saveFunds" method="POST" name="saveFunds" action="saveAssign.htm" autocomplete="on">
<div id="search_label" >
<table width="90%" cellpadding="2" cellspacing="2" id="listId" >
<thead class="search_res_headbg" >
<tr bordercolor="black">
<th> <INPUT type="checkbox" class ="it" onchange="checkAll(this)" name="chk[]" /></th>
<th>Loan A/c No</th>
<th style="width;1%;">Type</th>
<th>Funder</th>
<th>Purpose</th>
</tr></thead>
<c:forEach var="loan" items="${loans}">
<tr>
<td><input type="checkbox" name="loanId" value="${loan.valueZero}"></td>
<td><input type="text" name="loanAccNo" value="${loan.valueOne}" readonly="readonly"></td>
<td><input type="text" name="product" value="${loan.valueTwo}" readonly="readonly"></td>
<td style="width: 30%">
<select id="funderIds" name="funderIds"
style="width: 80%;" onchange="myHome();">
<option value="0">--Select--</option>
<c:forEach var="fund" items="${fundMap}">
<option value="${fund.key}">${fund.value}</option>
</c:forEach>
</select>
</td>
<td>
<select id="purposes" name="purposes" style="width:25%;" onchange="myPurpose()">
<option value="0">--Select--</option>
<c:forEach var="purpose" items="${fundProdPurpose}">
<option value="${purpose.id}" >${purpose.name}</option>
</c:forEach>
</select>
</td>
</tr>
</c:forEach>
</table>
</div>
<div style="float:left; clear:left;margin:10px 0 0 331px;">
<input class="search_btn" type="submit" name="submit" style="margin-left:0%;" value="Save" id="addfundsbtn" /></div>
</form>
答案 0 :(得分：1)
这种情况正在发生，因为您有多个ID与您在c：forEach循环中分配它们的名称相同
<select id="purposes" name="purposes" style="width:25%;" onchange="myPurpose()">
这是禁忌。一旦你打电话
$("#purpose").append("<option value='0'>--Select--</option>");
在您的函数中，您正在更改具有该id名称的每个元素，在这种情况下，它们都是id。如果您希望能够同时为所有下拉菜单执行某些操作，请为其指定类名。
至于你的问题： 尝试使用跟踪迭代索引的jstl c：forEach varStatus属性为每一行分配一个id ...
<c:forEach var="loan" items="${loans}" varStatus="idx">
<tr id="${idx.index}">
// cells here
</tr>
</c:forEach>
将索引传递给您的函数
function myHome(rowIndex) {
// function here
}
在函数调用中包含行索引
onchange="myHome(${idx.index});"
然后使用jQuery查找选择器从表行导航到选择选项
$("#"+rowIndex).find("#purposes option").remove();
另一种方法是在实际选择选项中使用索引，方法是将其作为id的一部分。我更喜欢将它添加到行中，因为每行都有一个特定的id，一旦你知道需要操作哪一行，就很容易遍历它。请记住，如果一个页面上有多个表，您可能希望将表名附加到行索引，这样就可以避免在每个表上操作行x。