@html.DropDown ASP MVC 和 Select2 多选

Question

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

@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）在被调用时 "ready"。

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

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

@html.DropDown ASP MVC 和 Select2 多选

@html.DropDown ASP MVC and Select2 multiselect

asp.net-mvc

jquery-select2

jquery-select2-4