@html.DropDown ASP MVC 和 Select2 多选

Question

我在视图中添加了@Html.DropDownList，此下拉列表的数据作为 ViewModel 中的属性传递。如何将 Select2 多选插件添加到此下拉列表中。

@Html.DropDownList("ValueId", new SelectList(item.Values, "Id", "Name"), new { @class = "values js-example-basic-multiple", @multiple ="multiple", @id="dropDown"}) | @Html.ActionLink("Delete", "Delete", new { id=item.Id })`

JQuery:

$('#dropDown').select2();

页面渲染后：

 `<select class="values js-example-basic-multiple" data-val="true" data-val-number="The field ValueId must be a number." data-val-required="The ValueId field is required." id="dropDown" multiple="multiple" name="ValueId"><option value="4">M</option>

8 红色的 `

脚本：

`<script src="/Content/jquery-3.1.1.min.js"></script>`

<link href="/Content/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

更新：我发现了错误。我正在向我的页面添加一个新的 JQuery 实例，但我忘记了我的 shared_layout 页面已经添加了一个 JQuery 实例。

Answer 1

根据您提供的信息，实际上有两种选择：

• 没有加载或引用 jQuery 库。
• jQuery（或 select2）在被调用时还没有“准备好”。

由于 select2 依赖于 jQuery，因此您必须确保引用它并且将必要的代码放在文档就绪块中，以确保您的依赖项在之前准备好被调用：

<!-- Your Example List here -->
@Html.DropDownList("Foo", new SelectList(ViewBag.List), new { multiple = "true", id = "dropDown"})

<!-- Example references (prior to closing </body> tag) -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
     $(function(){
          $('#dropDown').select2();
     });
</script>

你可以see a complete, and fully functional example using ASP.NET here。