[英]Select2 doesn't show options
I'm currently testing Select2.js in my ASP.NET MVC project.我目前正在我的 ASP.NET MVC 项目中测试 Select2.js。
The first test on a "normal" view just worked fine but now I'm trying to add this to a select box inside a partial view that gets loaded on Ajax Call and then displayed inside a <div>
on the normal view page.对“普通”视图的第一个测试运行良好,但现在我尝试将其添加到局部视图内的选择框中,该视图在 Ajax 调用上加载,然后显示在普通视图页面上的<div>
内。
The code to generate the dropdown looks like this:生成下拉列表的代码如下所示:
@Html.DropDownList("addRole",
new SelectList(ViewBag.availableRoles, "Id", "Name"),
"Rolle auswählen",
new { @name="addRole", @class = "form-control" }
)
And on the end of the partial view file I added the following:在局部视图文件的末尾,我添加了以下内容:
$(document).ready(function () {
//var data = [{ id: 1, text: "Test" }];
$("#addRole").select2({
//data: data
});
});
It looks like it works because of the look of the select box changes but when I try to open it, it just shows nothing.看起来它可以工作,因为选择框的外观发生了变化,但是当我尝试打开它时,它什么也没显示。 Same happens when I uncomment the data
variable code above.当我取消注释上面的data
变量代码时,也会发生同样的情况。
It just doesn't show anything to me and I don't know why.它只是没有向我显示任何内容,我不知道为什么。
I've already tried to add the JavaScript code to $(document).ajaxComplete
or in the success
function from the AJAX call but it doesn't change anything.我已经尝试将 JavaScript 代码添加到$(document).ajaxComplete
或来自 AJAX 调用的success
函数中,但它没有改变任何东西。
I got the answer now.我现在得到了答案。 The problem was not that the select2 element has no items, the problem was the given items did not show up.问题不是 select2 元素没有项目,问题是给定的项目没有显示。 So I thought about why didn´t they show up and found out that I´m really stupid.所以我想为什么他们没有出现,发现我真的很愚蠢。 It did show up, but I can´t see it because of the z-index.它确实出现了,但由于 z-index 我看不到它。 My popup window got a z-index of 20k so the dropdown list was behind the window.我的弹出窗口的 z-index 为 20k,因此下拉列表位于窗口后面。
So to solve this just add:所以要解决这个问题,只需添加:
.select2-dropdown {
z-index:99999;
}
Or add a dropdownCssClass to the select2 settings with the given z-index like this:或者使用给定的 z-index 将 dropdownCssClass 添加到 select2 设置,如下所示:
.select2-dropdown.increasezindex {
z-index:99999;
}
JS: JS:
$(document).ready(function () {
$("#addRole").select2({
dropdownCssClass:'increasezindex'
});
});
In my case, I was displaying a select2 on a pop-up element and this causes the dropdown to disappear because it is attached by default to the <body>
element.就我而言,我在弹出元素上显示 select2,这会导致下拉菜单消失,因为它默认附加到<body>
元素。
Select2 troubleshooting guide highlights a similar issue with Bootstrap modals. Select2 故障排除指南强调了 Bootstrap 模态的类似问题。
To overcome this problem I had to use the dropdown placement option provided,为了克服这个问题,我不得不使用提供的下拉位置选项,
let $select = $('select'),
$parent = $select.parent();
$select.select2({
dropdownParent: $parent
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.