在表格行中使用JavaScript的動態下拉列表及其選項？

Question

如何使用javascript在表行中動態添加下拉列表及其選項。 需要調用的功能是按鈕的Onclick。

function addRow() {                                                                 
        @{

            Model.lstfcDayConfig.Add(new NewFCDayConfig());               
         }
        var index = $("#tbFCDays").children("tr").length;                                                                      
        var indexCell = "<td style='display:none'><input  name='lstfcDayConfig.Index' type='hidden' value='" + index + "' /></td>";
        var titleCell = "<td><input id='lstfcDayConfig" + index + "__Title' name='lstfcDayConfig[" + index + "].Description' type='text' value='' /></td>";
        var startDateTimeCell = "<td><input id='lstfcDayConfig" + index + "__StartTime' name='lstfcDayConfig[" + index + "].StartDateTime' type='date' value='' /></td>";
        var EndDateTimeCell = "<td><input id='lstfcDayConfig" + index + "__EndTime' name='lstfcDayConfig[" + index + "].EndDateTime' type='date' value='' /></td>";
        var removeCell = "<td><input id='btnAddDay' type='button' value='Remove' onclick='removeRow(" + index + ");' /></td>";

        var newRow = "<tr id='trFCConfigRow" + index + "'>" +
        indexCell + titleCell + startDateTimeCell + EndDateTimeCell + removeCell + "</tr>";
        $("#tbFCDays").append(newRow);
    }

我已經使用上面的代碼添加了文本框，但是我不確定如何添加下拉列表。使用選擇框可以在同一代碼中添加下拉列表，但是當我需要添加選項時出現問題，因為需要從ViewBag添加選項

Answer 1

我終於想通了。 在此處發布可能需要的人...

function addRow() {                                                                 
        @{

            Model.lstObjEvtNotifyCfgDetail.Add(new  NewEventNotifyCfgDetail());               
        }


    var index = $("#tbEvtCfg").children("tr").length;


    var indexCell = "<td style='display:none'><input name='lstObjEvtNotifyCfgDetail.Index' type='hidden' value='" + index + "' /></td>";
    //var titleCell = "<td><input id='lstObjEvtNotifyCfgDetail" + index + "__Title' name='lstObjEvtNotifyCfgDetail[" + index + "].EventCode' type='text' value='' /></td>";

    //var startDateTimeCell = "<td><input id='lstfcDayConfig" + index + "__StartTime' name='lstfcDayConfig[" + index + "].StartDateTime' type='date' value='' /></td>";
    //var EndDateTimeCell = "<td><input id='lstfcDayConfig" + index + "__EndTime' name='lstfcDayConfig[" + index + "].EndDateTime' type='date' value='' /></td>";
    //var removeCell = "<td><input id='btnAddDay' type='button' value='Remove' onclick='removeRow(" + index + ");' /></td>";

     var EventCodeControl="<td>"+ "<select name='lstObjEvtNotifyCfgDetail[" + index + "].EventCode' value=''>" ;


     @foreach (SelectListItem sli in (List<SelectListItem>)ViewBag.EventCodeList)
     {
         @:EventCodeControl = EventCodeControl + "<Option Value=@(sli.Value)>" + '@sli.Text' + "</Option>";
     }
        EventCodeControl = EventCodeControl + "</select></td>";

     var NotifyHanControl = "<td>" + "<input type='checkbox' name='lstObjEvtNotifyCfgDetail[" + index + "].IsNotifyHAN'>" + "</td>";
     var NotifyWanControl = "<td>" + "<input type='checkbox' name='lstObjEvtNotifyCfgDetail[" + index + "].IsNotifyWan'>" + "</td>";
     var DiscSupplyControl = "<td>" + "<input type='checkbox' name='lstObjEvtNotifyCfgDetail[" + index + "].IsDisconnectSupply'>" + "</td>";

    var newRow = "<tr id='trFCConfigRow" + index + "'>" +
    indexCell + EventCodeControl +NotifyHanControl+ NotifyWanControl+DiscSupplyControl+"</tr>";
    $("#tbEvtCfg").append(newRow);
    }

快樂編碼！！！