Select2下拉列表在Colorbox中失败

Question

在ColorBox中使用Select2时，Select2下拉选项无法显示。

我在应用程序的其他地方成功地使用了Select2下拉列表，但这是我第一次尝试在colorbox弹出窗口中使用它。

我尝试了这里列出的所有建议，但都没有用: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。我的浏览器是IE11。

我是这样打开colorbox的（我没有使用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方法调用似乎起作用了--它具有正确的宽度，正确地显示selected选项，并且当我单击它时，templateResult和templateSuggestion方法都正确地激发，并且它明显地经历了与我在其他地方成功使用Select2元素时相同的轻微闪烁和颜色变化。当我单击Select2元素并在DOM Explorer中查看页面时，我可以看到Select2 html以及选项已经存在。他们就是看不见。

从用户的角度来看，下拉列表无法下拉和显示选择选项。

Answer 1

实际上，我没有正确应用https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400中的建议。

其中一个建议是改变Z指数，如下所示：

.select2-close-mask {
z-index: 10000;
}
.select2-dropdown {
z-index: 10001;
}

我以为我已经试过了，但仔细检查，我的css被select2.css文件覆盖了，这个文件是在我应用Z索引后加载的，因此覆盖了我想要做的事情。

我甚至尝试通过jquery调用应用z-index，例如：

$('.select2-dropdown').css('z-index',10005);

在调用Select2之前和之后都是如此，但无论出于什么原因，这都没有效果。

但是在加载select2.css之后加载我的样式更改可以解决这个问题。