Question

如何使用javascript动态地在表格行中添加下拉列表及其选项。需要调用的函数是Onclick of button。

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);
    }

快乐编码!!!!!

使用表格行中的javascript动态下拉列表及其选项？

1 个答案: