Javascript 在颜色框内选择2下拉列表失败

当在颜色框内使用Select2时，Select2下拉选项无法显示

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

我尝试了这里列出的所有建议，但都没有效果：

我使用的是jquery v3.1.1、jquery ui v1.12.1、jquery.Select2 v4.0.3和jquery.colorbox v1.4.29。我的浏览器是IE 11

我像这样打开颜色框（我没有使用iframe，model是默认值“false”）：

运行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资源管理器中查看页面时，我可以看到Select2 html与选项一起存在。它们就是看不见

---

从用户的角度来看，下拉菜单无法下拉并显示选择选项。

实际上，我没有正确地应用来自的建议

其中一个建议是更改z索引，如下所示：

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

我想我已经试过了，但是仔细检查后，我的css被select2.css文件覆盖了，它在我应用z-index之后加载了，因此重写了我要做的事情

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

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

在调用Select2之前和之后，但无论出于何种原因，这都没有效果

---

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

使用下面的链接在输入搜索中键入select2:

添加代码：

$('#mySelect2').select2({
    dropdownParent: $('#myModal')
});

$('#mySelect2').select2({
    dropdownParent: $('#myModal')
});