javascript - jQuery - 循环遍历表格时在下拉列表中获取选定的值

Question

我编写了这个 javascript 来获取表的 Id，然后先循环 tr，然后循环 td。我不知道要编写什么逻辑来获取 td 中下拉列表的选定值。并非所有 td 都有下拉菜单。

这是我的 JavaScript

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

哪个输出:

table 采用 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 />
    }
}

任何人都知道获得我想要的值的好方法。

Answer 1

使用Descendant Selector (“ancestor descendant”)直接获取table中的selects。

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.