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

Question

我在我的项目中使用 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>

Answer 1

发生这种情况是因为您有多个 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 行。