javascript - 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。我的浏览器是 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 以及选项存在。它们只是不可见。

从用户的 Angular 来看，下拉菜单根本无法放下并显示选择选项。

Answer 1

实际上我没有正确应用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 解决了这个问题。