Java 从表中的其他下拉列表填充多个下拉列表

我在我的项目中使用SpringMVC

表中有许多值列表，我正在jsp中加载它们。使用

c:forEach var=“loan”items=“${loans}”JSTL标记，我正在为结果生成一个html表

在该表中，每行显示两个下拉列表。他们是资助者和目标。这些下拉列表也来自表格。我正在编写一个AJAX调用来填充基于funder的purpose下拉列表

我有4个贷款价值。因此，它将生成包含四行的表。在每4行中，它都有出资人和目的的下拉列表

问题是，如果我更改了一行中的funder，它将填充所有4行中的purpose下拉列表

我想为每一行选择不同的出资人和不同的目的。有人能给我一个正确的方法吗

这是我的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>

函数myHome（）{
var zoneId=$（“#funderId”）.val（）；
$（“.funder”）.val（$（“#funderId选项：选中”）.text（）；
$（“#目的选项”）.remove（）；
$（“#目的”）。追加（“--Select--”）；
$.ajax({
键入：“获取”，
网址：“fundloandetils.htm”，
数据：“目的\行动=目的和区域ID=“+zoneId，
成功：功能（数据）{
flagZone=false；
var obj=jQuery.parseJSON（数据）；
var funderpurpose=目标funderpurpose；
funderpurpose=funderpurpose
.子字符串（1，funderpurpose.length-1）；
funderpurpose=$.trim（funderpurpose）；
如果（funderpurpose！=“”）{
var regioncluserArray=基金用途拆分（“，”）；
var finalTemp=“”；
如果（regioncluserArray.length>=1）{
对于（var i=0；i

之所以发生这种情况，是因为在c:forEach循环中分配多个id时，有多个id的名称相同

<select id="purposes" name="purposes" style="width:25%;" onchange="myPurpose()">

通过在函数调用中包含行索引

onchange="myHome(${idx.index});"

然后使用jQuery查找选择器从表行导航到选择选项

$("#"+rowIndex).find("#purposes option").remove();

另一种方法是在实际选择选项上使用索引，将其作为id的一部分。我更喜欢将其添加到行中，因为这样每一行都有一个特定的id，一旦知道需要操作哪一行，就很容易遍历它。请记住，如果一个页面上有多个表，可能需要将表名附加到行索引中，这样可以避免对每个表上的行x进行操作

function myHome(rowIndex) {
    // function here
}

onchange="myHome(${idx.index});"

$("#"+rowIndex).find("#purposes option").remove();