Select2 不显示选项答案

【问题标题】：Select2 doesn't show optionsSelect2 不显示选项
【发布时间】：2017-10-25 08:36:14
【问题描述】：

我目前正在我的 ASP.NET MVC 项目中测试 Select2.js。

“正常”视图上的第一个测试运行良好，但现在我试图将其添加到部分视图内的选择框中，该视图在 Ajax 调用上加载，然后显示在正常视图上的 <div> 内页面。

生成下拉列表的代码如下所示：

@Html.DropDownList("addRole",
   new SelectList(ViewBag.availableRoles, "Id", "Name"),
   "Rolle auswählen", 
   new { @name="addRole", @class = "form-control" }
)

在部分视图文件的末尾，我添加了以下内容：

$(document).ready(function () {
    //var data = [{ id: 1, text: "Test" }];

    $("#addRole").select2({
        //data: data
    });
});

看起来它可以工作，因为选择框的外观发生了变化，但是当我尝试打开它时，它什么也没显示。当我取消注释上面的data 变量代码时也会发生同样的情况。

它只是没有向我显示任何东西，我不知道为什么。

我已经尝试将 JavaScript 代码添加到 $(document).ajaxComplete 或 AJAX 调用的 success 函数中，但它不会改变任何内容。

【问题讨论】：

您是否检查了ViewBag.availableRoles 是否包含字段Id 和Name 的有效值？
这与select2 无关，因为没有它也无法工作......
是的，当我查看 DOM 元素时，我会看到所有条目。此外，当我删除 $("#addRole").select2() 它工作正常。
可能对谁感兴趣（例如@atish-shakya），并且完全偏离主题，这就是这么多编辑的原因：chat.stackoverflow.com/transcript/message/48255477#48255477

标签： javascript jquery ajax asp.net-mvc jquery-select2

【解决方案1】：

我现在得到了答案。问题不是 select2 元素没有项目，问题是给定项目没有显示。所以我想了想他们为什么不出现，发现我真的很愚蠢。它确实出现了，但由于 z-index，我看不到它。我的弹出窗口的 z-index 为 20k，因此下拉列表位于窗口后面。

所以要解决这个问题，只需添加：

.select2-dropdown {
    z-index:99999;
}

或者使用给定的 z-index 将 dropdownCssClass 添加到 select2 设置中，如下所示：

.select2-dropdown.increasezindex {
    z-index:99999;
}

JS：

$(document).ready(function () {
    $("#addRole").select2({
        dropdownCssClass:'increasezindex'
    });
});

【讨论】：

【解决方案2】：

在我的例子中，我在弹出元素上显示了一个 select2，这会导致下拉列表消失，因为它默认附加到 <body> 元素。

Select2 troubleshooting 指南强调了与 Bootstrap 模式类似的问题。

为了克服这个问题，我不得不使用提供的dropdown placement option，

let $select = $('select'), 
  $parent = $select.parent();

$select.select2({
  dropdownParent: $parent
});

【讨论】：