ASP MVC 引导程序 - Select2 DropDownListFor 显示重复框答案

【问题标题】：ASP MVC Bootstrap - Select2 DropDownListFor Displays Duplicate BoxesASP MVC 引导程序 - Select2 DropDownListFor 显示重复框
【发布时间】：2017-11-23 01:38:33
【问题描述】：

我有一个 ASP.net MVC 项目。我的所有 DropDownListFor 显示为 2 个框而不是 1 个。这是当前视图的样子：

这是视图应该的样子：

这是视图中的代码：

   <div class="col-xs-12 col-sm-6 col-md-4 ">
        <div class="form-group select-280">
            @Html.LabelFor(model => model.HoleID)
            <br />
            @Html.DropDownListFor(model => model.HoleID, (List<SelectListItem>)ViewData["HoleList"], new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.HoleID)
       </div>
   </div>

Javascript 从视图中使 DropDownListFor 可搜索（Select2）：

$(document).ready(function () {

    $("#HoleID").select2();

}

为什么我的所有 DropDownListFor 都显示为重复项，我该如何纠正这个错误？

编辑

删除.select2() 修复了错误并删除了重复的下拉列表...但是这使得剩余的下拉列表不可搜索。如何在保持搜索功能的同时解决此问题？

【问题讨论】：

尝试删除 LabelFor
@ishanjoshi 没用。其他建议？
为什么需要放 $("#HoleID").select2();在剃须刀中申请为 select2 的类
@ishanjoshi 你能告诉我怎么做吗？你在 class= "form-control" 里面吗？
@Html.DropDownListFor(model => model.HoleID, (List)ViewData["HoleList"], new { @class= "form-control select2" })

标签： javascript asp.net asp.net-mvc twitter-bootstrap razor

【解决方案1】：

我在使用 Kendo 时曾体验过这一点，而且一切都围绕着表单控制。问题是下拉菜单变成了更动态的东西；原来的 SELECT 元素实际上可能隐藏在 UI 中。 Select2 可能使用多个元素来表示选择，并且原始表单控件类应用于这两个元素，并强制它们显示，而不是显示和隐藏。或者表单控件类正在强制显示原始选择。

我不得不停止使用表单控件，然后为剑道控件创建一个特殊类，只是为了不导致其中一个元素始终显示...

解决所有问题的方法是检查标记。您会看到表单控件类被传递到内部元素。

【讨论】：

删除 form-control 不会删除第二个框。检查标记后，我可以看到顶部框是“选择”，底部框是“跨度”
根据我的经验（虽然我没有使用过 select2），通常会发生 SELECT 元素被隐藏（你真的无法设置它的样式）但将其保留在 DOM 中，以便在回发时发生时，所选值被保留。然后，它创建另一个元素来显示时尚的下拉菜单。如果两者都显示，则很可能出现问题........

【解决方案2】：

这是通过 Visual Studio 发布过程确定的服务器错误。引导程序 select2 文件未正确存在于服务器中。

【讨论】：