地图全屏显示时不显示 select2

Question

嘿，我试图在谷歌地图上显示 select2(它的后端(并且有效，但是当地图全屏显示时，列表不会显示。我尝试通过更改 z-index 值但不起作用。有人可以帮助我吗？

$('document').ready(function() {
$('#Name').select2({
placeholder: "Choose name",
minimumInputLength: 3,
ajax: {
url: 'somthing here ...',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
// console.log(data);
return {
results: data
};
},
cache: true
}
});
});

Answer 1

现在你的select2 div在正文的所有div 最后一个元素之外。

将dropdownParent与谷歌地图类传递，以便select2 div将进入该div。

检查检查元素，然后尝试使用 Z 索引。

$('#Name').select2({
placeholder: "Choose name",
minimumInputLength: 3,
dropdownParent: $('.map'),
ajax: {
url: 'somthing here ...',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
// console.log(data);
return {
results: data
};
},
cache: true
}
});

查看更多信息 ： 常见问题

Answer 2

我使用了@Diip的链接。但就我而言，当地图进入全屏时，我注意到$('.map')没有显示。我更改为将 dropdownParent 与地图的元素一起使用gm-style并等待地图加载如下：

google.maps.event.addListenerOnce(map, 'idle', function () {
// do something only the first time the map is loaded
selectTag.select2({
width: '100%',
placeholder: "Select an option",
allowClear: true,
dropdownParent: map_container_tag.find('.gm-style'), // attach to google map when fullscreen
});
});