选择-select 下拉菜单无法通过 jquery MVC 工作

Question

我在我的 mvc razor 页面中使用带有多个 select 组的下拉菜单。我在下面关注 link 并使用 Multiple Select with Groups 下拉列表。

如果我在 razor 视图中实现如下示例，它工作正常：

....
<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 的按钮单击事件上添加更多 select 下拉菜单。我在 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 循环。第二个是：如果我尝试像上面的代码一样手动管理整个列表，那么列表也不会像下图那样正确显示：

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

我已经从下面尝试了 $(".chosen-select").chosen() link:

chosen-select link

Answer 1

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

选择-select 下拉菜单无法通过 jquery MVC 工作

chosen-select dropdown not working by jquery MVC

asp.net-mvc

jquery

razor

jquery-chosen

dropdown