如何使用 Javascript 將下拉列表添加到 MVC 中的動態行並將值綁定到 model

Question

我想在 javascript 中創建的行中添加一個下拉列表，並將所選下拉項的 id 或文本與我的 model 綁定。

這是表格：

  <table id="LineItems" class="table table-bordered fixed">
        <thead>               
            <tr>
                <th width="10%" class="text-center">
                    @Html.Label("Qty")
                </th>
                <th width="40%" class="text-center">
                    @Html.Label("Description")
                </th>
                <th width="15%" class="text-center">
                    @Html.Label("Project Number")
                </th>
                <th width="10%" class="text-center">
                    @Html.Label("Unit Cost")
                </th>
                @if (Model.CanCreateCustSignOff == true)
                {
                    <th width="10%" class="text-center">
                        @Html.Label("Custom Sign off")
                    </th>
                    <th width="20%" class="text-center">
                        @Html.Label("Approver")
                    </th>
                }
                <th width="10%" class="text-center">
                    @Html.Label("Action")
                </th>
            </tr>
        </thead>
        <tbody id="lineItems">
        </tbody>
    </table>

    <div>
        <input type="button" value="Add Line Item" class="btn btn-primary" onclick="addLineItem()" />
    </div>

查看 Model - Select 列表項由 controller 填充，由文本 = 用戶名和 Guid 值組成。 這些數據來自數據庫，我不知道會添加多少用戶。

public List<string> Approvers { get; set; }

public class LineItems
{
   public int Qty { get; set; }
   public string Description { get; set; }
   public decimal UnitCost { get; set; }
   public decimal LineItemCost { get; set; }
   public string ProjectNumber { get; set; }
   public bool CustSignOff { get; set; }
   public string ApproverId { get; set; }
   public Guid? ProjectId { get; set; }

 }

Javascript - 我已經能夠使用下面的方法成功綁定使用我的 model 創建的所有行的條目。

 function addLineItem() {
        @{ Model.LineEntry.Add(new PurchaseAuth.ViewModel.NewPurchAuthViewModel.LineItems());}

        //Generate Index
        var index = counter;
        var reqLineItemSignOff = "";
        var selectApprover = "";


        //Data Cells
        var qtyCell = "<td align='center' width='10%'><input id='LineEntry_" + index + "__QTY' name='LineEntry[" + index + "].Qty' type='number' value='0' min='0' step='1' class='qtyField form-control' /></td>";
        var descCell = "<td align='center' width='40%'><input id='LineEntry_" + index + "__Description' name='LineEntry[" + index + "].Description' type='textarea' value='' class='descField form-control' /></td>";
        var projNumberCell = "<td align='center' width='15%'><input id='LineEntry_" + index + "__ProjNumber' name='LineEntry[" + index + "].ProjectNumber' type='text' value='' class='projNumField form-control' /></td>";
        var unitCostCell = "<td align='center' width='10%'><input id='LineEntry_" + index + "__UnitCost' name='LineEntry[" + index + "].UnitCost' type='number' value='0.00' min='0.00' step='.01' class='unitCostField form-control' /></td>";

        //If User has override access
        if (override == "True") {
            reqLineItemSignOff = "<td align='center' width='10%'> <input id='LineEntry_" + index + "__CustSignOff' name='LineEntry[" + index + "].CustSignOff' type='checkbox' value='true' class='form-control chkLineItemSignOff' /></td>"

            var approverList = JSON.parse('@Html.Raw(Json.Encode(@Model.Approvers))');

            selectApprover = "<td align='center' width='10%'><select id='LineEntry_" + index + "_ApproverId' name='LineEntry[" + index + "].ApproverId' /></td>";

            $(approverList).each(function () {
                var option = $("<option />");
                option.text(this);
                option.val(this);

            });                
        }

        //Index Cell prevents delete button from removing all items up to entry
        var indexCell = "<td style='display:none'> <input name='LineEntry.Index' type='hidden' value='" + index + "' /></td>";

        //Button For Removal
        var removeCell = "<td align='center' width='10%'><input id='btnDelLine'" + index + "type='button' value='Remove' onclick=\"removeRow('" + index + "')\" class='btn btn-primary remBtn' /></td>";

        //Create New Row
        var newRow = "<tr id='trLineItem" + index + "'>" + indexCell + qtyCell + descCell + projNumberCell + unitCostCell + reqLineItemSignOff  + selectApprover + removeCell + "</tr>";

        //Add Row to Table
        $("#lineItems").append(newRow);

        //Increase counter
        counter++;
    }

更新 1：不需要 Guid 我可以按名稱查找。 Update2：取得了一些進展，只需要弄清楚如何添加選項。

Answer 1

我可以通過創建行然后將選項添加到 ID 來解決這個問題：

 approverList = JSON.parse('@Html.Raw(Json.Encode(@Model.Approvers))');
            var ddlId = document.getElementById(ddlApproverId);
            for (index in approverList) {
                ddlId.options[ddlId.options.length] = new Option(approverList[index], index.value);
            };