javascript - Select2 不显示选项

Question

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

“正常” View 上的第一个测试工作正常，但现在我试图将其添加到局部 View 内的选择框，该局部 View 在 Ajax 调用上加载，然后显示在 <div> 中。在普通 View 页面上。

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

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

在部分 View 文件的末尾，我添加了以下内容:

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

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

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

它只是没有向我显示任何内容，我也不知道为什么。

我已经尝试将 JavaScript 代码添加到 $(document).ajaxComplete或在 success来自 AJAX 调用的功能，但它不会改变任何东西。

Answer 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'
    });
});