选择的选择下拉菜单不适用于 jquery MVC

Question

我在我的 mvc razor 页面中使用带有多个选择的下拉列表和组。我正在关注下面的链接并使用 Multiple Select with Groups 下拉菜单。

Harvest Multiselect Dropdown Link

如果我像下面的示例在剃刀视图中实现它，它工作正常：

....
<select data-placeholder="Search option" id="Mainlist[0].SubList" class="chosen-select" multiple tabindex="6" name="MainList[0].SubList">
     <option value=""></option>
     @foreach (var mainListItem in Model.MainList)
     {
          <optgroup label="@mainListItem.Name">
           @foreach (var subListItem in mainListItem.SubList)
           {
               <option id="report">@subListItem.Name</option>
           }
           </optgroup>
      }
</select>
....

所选下拉菜单的上述剃须刀代码工作正常，如下图所示：

但我需要在 jquery 的按钮单击事件上添加更多的多选下拉菜单。我在 jquery 中尝试了以下代码：

var newRow =
"<select data-placeholder='Search option' id='Mainlist[1].SubList' class='chosen-select' multiple tabindex='6' name='MainList[1].SubList'>" +
        "<option value=''></option>" +
        "<optgroup label='Main List Item 1'>" +
        "<option id='report'>Sub List Item 1.1</option>" +
        "<option id='report'>Sub List Item 1.2</option>" +
        "</optgroup>" +
        "<optgroup label='Main List Item 2'>" +
        "<option id='report'>Sub List Item 2.1</option>" +
        "<option id='report'>Sub List Item 2.2</option>" +
        "</optgroup>" +
        "</select>";

$('#TestTable tr:last').after(newRow);

第一个问题是：我无法在 newRow 变量中实现 foreach 循环。 第二个是：如果我尝试像上面的代码一样手动管理整个列表，那么 List 也不会像下图一样正常出现：

知道是什么原因造成的吗？以及如何使下拉菜单通过 jquery 工作？或者有没有其他方法可以通过 jquery 添加相同的下拉菜单？

我已经从下面的链接尝试过 $(".chosen-select").chosen()：

chosen-select link

Answer 1

在选择添加到 dom 之后，检查您是否正在初始化选择。 你能告诉我你面临的错误吗？