Как добавить выпадающий список в динамическую c строку в MVC с Javascript и связать значение с моделью

Question

Я хотел бы добавить раскрывающийся список в строку, созданную в javascript, и связать идентификатор или текст выбранного выпадающего элемента с моей моделью.

Вот таблица:

  <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>

View Model - элемент Select List заполняется контроллером и состоит из text = usernames и значения, являющегося 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 - я смог успешно связать записи всех строк, созданных с моей моделью, используя ниже.

 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 не требуется, я могу искать по имени. Обновление 2: Достигнут некоторый прогресс, просто нужно выяснить, как добавить опции.

Answer 1

Я смог решить эту проблему, создав строку и добавив параметры к идентификатору, используя:

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