在Colorbox中使用Select2时，Select2下拉选项无法显示。
我在应用程序的其他位置成功使用了Select2下拉列表，但这是我第一次尝试在颜色框弹出窗口中使用它。
我已经尝试了这里列出的所有建议，但无济于事：https : //github.com/jackmoore/colorbox/issues/474#issuecomment-25836400
我正在使用jquery v3.1.1，jquery-ui v1.12.1，jquery.Select2 v4.0.3和jquery.colorbox v1.4.29。我的浏览器是IE 11。
我像这样打开颜色框（我没有使用iframe，而modal是默认值“ false”）：
$.colorbox(
{
href: '/MyDomain/MyAction',
open: true,
scrolling: true,
width: '60%',
height: "60%",
onComplete: function () {
myJavascriptFunction();
}
});
运行onComplete的函数如下所示：
myJavascriptFunction = function () {
$('#SelectId option[value="0"]').prop('disabled', true);
$("#SelectId ").select2({
minimumResultsForSearch: Infinity, //turns off the search box
width: '400px',
theme: "classic",
dropdownAutoWidth: true,
templateResult: myMethod,
templateSelection: myOtherMethod
}).on('select2:select', function (e) {
yetAnotherMethod(e);
});
}
我怀疑这是显示问题。Select2方法调用似乎在起作用-它具有正确的宽度，可以正确显示所选的选项，当我单击它时，templateResult和templateSuggestion方法均可以正确触发，并且显然会经历相同的轻微闪烁和颜色变化当我在其他地方成功使用Select2元素时，它们就会起作用。当我单击Select2元素并在DOM Explorer中查看页面时，我可以看到存在select2 html及其选项。它们只是不可见。
从用户的角度来看，下拉列表根本无法删除并显示选择选项。
其实我并没有从正确应用建议https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400。
其中的建议之一是更改z-index，如下所示：
.select2-close-mask {
z-index: 10000;
}
.select2-dropdown {
z-index: 10001;
}
我以为我已经尝试过了，但是仔细检查后，我的css被select2.css文件覆盖，该文件在我应用z-index之后加载，因此重写了我想做的事情。
我什至尝试通过jquery调用应用z-index，例如：
$('.select2-dropdown').css('z-index',10005);
在调用Select2之前和之后，但是无论出于何种原因，这都没有效果。
但是在加载select2.css之后加载我的样式更改解决了该问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句