解决模态框(modal)中select2下拉框无法显示的问题

遇到问题

在弹出的模态框中使用select2插件实现多选的功能时，点击选择框无法显示下拉列表

寻找原因

我发现当模态框弹出时，其他内容都被一个遮罩层遮挡住了

如上图中红框显示处皆为遮罩层遮挡的位置。而使用select2弹出的下拉框是否也被遮挡了呢，我删除弹出的模态框，果然

找到原因后，问题就好解决了

解决方案

当我们点击select2的选择框时，select2会自动在页面上回插入以下代码：

这个代码被遮挡了没有显示，我们添加将这个代码也加上模态框的class就可以显示出来

即在初始化select2时，添加以下代码：

//select多选
                        $(".select2_material").select2();
                        $(".select2-selection__rendered").on("click",function(e){
                            setTimeout("$('.select2-container.select2-container--default.select2-container--open').addClass('modal');",100);
                        });

添加延时100毫秒是因为当点击后直接添加modal的class，这时自动生成的代码可能还没生成，我们在延时后再在生成的代码中添加class，这样确保class添加成功。

成功结果如下图所示