我在我的项目中使用 Spring MVC。
我有一些来自表的值列表,我正在将它们加载到 jsp 中。使用
c:forEach var="loan"items="${loans}"JSTL 标签,我正在为结果生成一个 html 表。
在该表中,我在每一行中显示了两个下拉菜单。他们是资助者和目的。这些下拉菜单也来自表格。我正在编写一个 AJAX 调用以根据资助者填充目的下拉列表。
我有 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>
最佳答案
发生这种情况是因为您有多个 id,其名称与您在 c:forEach 循环中分配的名称相同
<select id="purposes" name="purposes" style="width:25%;" onchange="myPurpose()">
这是一个禁忌。一旦你打电话
$("#purpose").append("<option value='0'>--Select--</option>");
在您的函数中,您正在更改具有该 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 行。
关于java - 从表中的其他下拉列表填充多个下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29554814/