Select2 不显示选项

Question

我目前正在我的 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

函数中，但它没有改变任何内容。

Answer 1

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

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

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

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

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

JS：

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

Answer 2

在我的例子中，我在弹出元素上显示 select2，这会导致下拉菜单消失，因为它默认附加到

<body>

元素。

Select2 故障排除指南突出显示了 Bootstrap 模式的类似问题。

为了克服这个问题，我必须使用提供的下拉放置选项，

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

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

Answer 3

我在这里找到了解决方案：https://select2.org/troubleshooting/common-problems#select2-does-not-function-properly-when-i-use-it-inside-a-bootst

它说：“这将导致下拉列表附加到模态，而不是”（这里模态是元素）

Select2 不显示选项

问题描述投票：0回答：3

3个回答

最新问题

Select2 不显示选项

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3