模型视图控制器-动态下拉列表和它的选项使用javascript在表行

model view controller - Dynamic dropdown list and its options using javascript in table row?

本文关键字：选项 javascript 控制器 视图 动态 下拉列表 模型      更新时间：2023-09-26

如何使用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

添加选项

我终于自己弄明白了。在这里张贴，谁可能需要它…

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

编码快乐! !

相关文章：