Multiple dropdown populating from other dropdown in a table

Question

I am using Spring MVC in my project.

I have a number of list of values from table, and I am loading them in jsp. Using

c:forEach var="loan" items="${loans}" JSTL tag, I am generating a html table for the results.

In that table, I am showing two dropdowns in each row. They are funder and purpose. These dropdowns are from tables as well. I am writinga AJAX call to populate purpose Dropdown based on funder.

I am having 4 values for loans. So its generating table with four rows. in each 4 rows it s having dropdowns of funder and purpose.

The problem is, If I changed the funder in one row, it will populate all the purpose dropdowns in all 4 rows.

I want to select different funder and different purpose for each row. Can anyone give me a right way in this?

Here is my 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

It's happening because you have multiple id's with the same name as you are assigning them in your c:forEach loop

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

This is a no-no. Once you call

$("#purpose").append("<option value='0'>--Select--</option>");

in your function you are changing every element with that id name, which in this case, is all of them. If you want to be able to do something to all the drop-downs at one time assign them a class name instead.

As for your problem: Try assigning each row an id using the jstl c:forEach varStatus attribute which tracks the iteration index...

<c:forEach var="loan" items="${loans}" varStatus="idx">
    <tr id="${idx.index}">
        // cells here
    </tr>
</c:forEach>

Pass the index to your function

function myHome(rowIndex) {
    // function here
}

by including the row index in your function call

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

Then use the jQuery find selector to navigate from your table row to your select option

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

An alternative would be to use the index on the actual select option by including it as part of the id. I prefer to add it to the row because then each row has a specific id and it's easy to traverse through it once you know which row you need to manipulate. Keep in mind, if you have multiple tables on one page, you might want to append the table name to the row index, that way you avoid manipulating row x on each table.