javascript - 如何在单击按钮时附加多个下拉列表，每个下拉列表在名称属性中具有不同的索引？

Question

我正在尝试在单击按钮时附加多个下拉列表。这些下拉列表应在其“名称”属性中具有正确的索引。

这是下拉菜单:-

<div id="dropdownDiv" style="display:none">
    <div class="form-group">
        @Html.LabelFor(model => model.PropertyInvestors, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.PropertyInvestors, (IEnumerable<SelectListItem>)@ViewBag.Investors, "Select Investor", htmlAttributes: new { @id = "dropdown",@name= "[#].PropertyInvestors", @class = "form-control",@onChange="dropdownChange()" })
            @Html.ValidationMessageFor(model => model.PropertyInvestors, "", new { @class = "text-danger" })
        </div>
    </div>
</div> 

这是我尝试克隆下拉列表并将其名称属性替换为所需索引的 JS 代码。

$('#addDropdown').click(function () {
    var index = (new Date()).getTime();
    var clone1 = $('#dropdownDiv').clone();        
    clone1.html($(clone1).html().replace(/\[#\]/g, '[' + index + ']'));
    $('#field1').append(clone1.html());
});

问题:- 下拉列表在单击时被附加，但它们的名称属性对于生成的所有下拉列表都是相同的，因此我无法将数据回发到 Controller 。

Answer 1

虽然这个问题可以通过使用虚拟代码和操纵索引号来解决。通过使用 JS，一个好的方法是使用 Html.BeginCollectionItem()，为下拉列表创建一个部分 View ，然后进行 ajax 调用以将部分 View 附加到主视图。引用答案HERE