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

由于选择框的外观变化，它看起来很有效，但是当我尝试打开它时它只显示任何内容。当我取消注释上面的“dataset”js-code时也会发生同样的情况。它只是没有向我展示任何东西，我不知道为什么。

我已经尝试将javascript代码添加到$（document）.ajaxComplete或者在ajax调用的success函数中添加，但它不会改变任何内容。

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

Answer 2

就我而言，我在弹出元素上显示了一个 select2，这会导致下拉菜单消失，因为它默认附加到 <body> 元素。

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

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

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

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

Select2没有显示选项

2 个答案: