CODEWITHSUNDEEP
jquery
Madam Zu Zu
Madam Zu Zu

Reputation: 6605

Looping through a table to get dropdown values

i have a table that looks like:

<table id="tblFileUpload" cellpadding="2" cellspacing="2" class="styled">
    <tr>
        <td align="left">
            <asp:FileUpload ID="fileUpload1" runat="server" size="50" />
        </td>
        <td align="left">
            <asp:DropDownList ID="ddlRequestType1" runat="server" DataTextField="Value" DataValueField="Key" CssClass="ddl"></asp:DropDownList>
        </td>
        <td align="left">
            <asp:DropDownList ID="ddlStatusType1" runat="server" DataTextField="Value" DataValueField="Key" CssClass ="ddl2">
            </asp:DropDownList>
            <label class="badFileUploadRow">*</label>
        </td>
    </tr>
    <tr>
        <td align="left">
            <asp:FileUpload ID="fileUpload2" runat="server" size="50" />
        </td>
        <td align="left">
            <asp:DropDownList ID="ddlRequestType2" runat="server" DataTextField="Value" DataValueField="Key" CssClass="ddl"></asp:DropDownList>
        </td>
        <td align="left">
            <asp:DropDownList ID="ddlStatusType2" runat="server" DataTextField="Value" DataValueField="Key"></asp:DropDownList>
            <label class="badFileUploadRow">*</label>
        </td>
    </tr>

It keeps going on and on for another few rows (all named in the same manner)

I should only be able to select 1 status for each request. I need check if a duplicate request types have been selected when any given status type is changed and disable selected statustype of that row.

so for example. if i have selected "save" for both requesttype1 and requestype3, and then selected "some status" in the statustype3, i need to disable "some status" in the same row as requesttype1.

I have the following right now:

$(".ddl2").change(function () {
    var id = $(this).attr('id');
    var cssType = $(this).attr('class');
    var pos0 = id.indexOf('ddlStatusType'); // +14;
    var itemNo = id.substr(pos0);
    var seen = {};
    $('#tblFileUpload td')
        .each(function () {
        //find if multiple request types already exist.
        // if (cssType == "ddl") {
            var txt = $('.ddl :selected').text();
            if (seen[txt]) {//there is a duplicate
                //   $(this).remove();
            }
            else
                seen[txt] = true;
            // }
    });
});

txt variable returns values of ALL selected values of the request type, not just the one on the same row... i'm stuck. please help.

Upvotes: 1

Views: 3386

Answers (1)

Matt Ball
Matt Ball

Reputation: 359816

txt variable returns values of ALL selected values of the request type, not just the one on the same row

Well of course. That's what $('.ddl :selected') matches: every element with the selected pseudo-class which is a descendant of an element with class ddl. Use a more-specific selector.

Try changing the inner .each() to this:

$('#tblFileUpload tr').each(function () {
    var txt = $(this).find('.ddl').val();
    if (seen[txt]) {//there is a duplicate
        //   $(this).remove();
    }
    else seen[txt] = true;
});

Note, it's better to use .val() on a <select> than to look for the <option selected> yourself.

Upvotes: 2

Related Questions