CODEWITHSUNDEEP
javascriptjqueryhtml.dropdownlistfor
nick gowdy
nick gowdy

Reputation: 6511

jQuery - get selected value in dropdownlist when looping through a table

I've written this javascript to get the Id of a table then to loop through the tr's first then the td's. I am not sue what logic to write to get the selected value of the dropdown in a td. Not all tds, have a dropdown.

This is my javascript

function submitPanel(value) {
    $('#' + value + '> tbody  > tr').each(function () {
        alert($(this).html());
        $(this).find('td').each(function () {
            alert($(this).html());
        })
    });
}

Which output this:

enter image description here

The table is made in MVC 4 razor

@model IMEModels.InterviewManagement.InterviewManagement
<hr />
@using (Html.BeginForm("SubmittedInterviews", "InterviewManagement", FormMethod.Post))
{
    if (Model.InterviewSchedules.Count > 0)
    {
        <table>
        <tr>
        <td>@Html.Label("Show dates without Chair or Co-panelist") </td>
        <td>@Html.RadioButton("Show dates without Chair or Co-panelist", new {Id = "rdoShow" })</td>
        </tr>
        </table>


        for (int i = 0; i < Model.Centres.Count; i++)
        {
    @Html.Label(Model.Centres[i].CentreName)

            for (int ii = 0; ii < Model.Centres[i].Locations.Count; ii++)
            {
    @Html.Label(Model.Centres[i].Locations[ii].LocationName)

                for (int iii = 0; iii < Model.Centres[i].Locations[ii].InterviewDates.Count; iii++)
                {

    var ChairList = Model.Interviewers.Join(Model.DatePreferences, m => m.InterviewerId, d => d.InterviewersInterviewerId, (m, d) => new
    {
        Interviewer = m,
        DatePreferences = d
    })
    .Where(d => d.DatePreferences.LocKey == Convert.ToString(Model.Centres[i].Locations[ii].LocationKey) && d.Interviewer.IsChair && d.DatePreferences.Date == Model.Centres[i].Locations[ii].InterviewDates[iii].Date)
    .GroupBy(x => new { x.Interviewer.InterviewerId, x.Interviewer.Name })
    .ToDictionary(a => a.Key.InterviewerId, b => b.Key.Name);

    var NonChairList = Model.Interviewers.Join(Model.DatePreferences, m => m.InterviewerId, d => d.InterviewersInterviewerId, (m, d) => new
    {
        Interviewer = m,
        DatePreferences = d
    })
    .Where(d => d.DatePreferences.LocKey == Convert.ToString(Model.Centres[i].Locations[ii].LocationKey) && d.DatePreferences.Date == Model.Centres[i].Locations[ii].InterviewDates[iii].Date)
    .GroupBy(x => new { x.Interviewer.InterviewerId, x.Interviewer.Name })
    .ToDictionary(a => a.Key.InterviewerId, b => b.Key.Name);

    @:<div class="date-wrap  @(ChairList.Count == 0 || NonChairList.Count == 0 ? "nochairspanelists" : "chairspanelists") >

    if (NonChairList.Count == 0)
    {
        NonChairList.Add(new Guid(), "No panelists available.");
    }

    if (ChairList.Count == 0)
    {
        ChairList.Add(new Guid(), "No panelists available.");
    }

    @Html.Label(Model.Centres[i].Locations[ii].InterviewDates[iii].Date.ToLongDateString())

    <table id="tbl@(Model.Centres[i].Code + "-" + Model.Centres[i].Locations[ii].LocationKey + "-" + Model.Centres[i].Locations[ii].InterviewDates[iii].Date.Ticks)" class="tblInterviewManager">
        <tr>
            <td>
                Chair
            </td>
            <td>
                Co-panelist
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                @Html.DropDownListFor(m => m.InterviewSchedules[iii].ChairId, new SelectList(ChairList, "Key", "Value"))
                <br />
            </td>
            <td>
                @Html.DropDownListFor(m => m.InterviewSchedules[iii].CofacilitatorId, new SelectList(NonChairList, "Key", "Value"))
            </td>
             @if (ChairList.ElementAt(0).Value == "No panelists available." || NonChairList.ElementAt(0).Value == "No panelists available.")
            {
            <td>
            <input type="submit" value="Save panel"  disabled="disabled" />
            </td>
             }
             else
             {
            <td>
            <input type="button" value="Save panel" id="btnSubmit" onclick="return submitPanel('tbl@(Model.Centres[i].Code + "-" + Model.Centres[i].Locations[ii].LocationKey + "-" + Model.Centres[i].Locations[ii].InterviewDates[iii].Date.Ticks)');"/>
            </td>
             }
        </tr>
    </table>      
    @:</div>
                }
            }

    <br />
        }
        <div class="clear"></div>

    <hr />
    }
}

Anyone know a good way to get the values I want.

Upvotes: 2

Views: 2056

Answers (1)

Adil
Adil

Reputation: 148110

Use Descendant Selector (“ancestor descendant”) to directly get the selects within the table. 

function submitPanel(value) {
    $('#' + value + ' select').each(function () {
        alert($(this).val());        
    });
}

Selects all elements that are descendants of a given ancestor, A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element, jQuery docs.

Upvotes: 2

Related Questions