select2 在谷歌地图全屏时不起作用答案

【问题标题】：select2 not working when in google maps fullscreenselect2 在谷歌地图全屏时不起作用
【发布时间】：2017-01-03 17:24:27
【问题描述】：

我有一个谷歌地图，用户可以进入全屏模式。我将带有下拉列表的 div 添加为地图的控件，并将 select2 插件应用于下拉列表。问题是当地图处于全屏模式时，select2 下拉列表不显示列表，当地图未处于全屏模式时，下拉菜单正常工作。控制台中没有错误。我尝试更改 z-index 但没有运气。有什么想法吗？

JSFiddle Example

HTML

    <div id="wrapper">
  <div id="testMap">
  </div>
  <div id="inputControls" style="max-width: 275px">
    Select Country:
    <select id="testDropdownList" class="full-width">
      <option value="-1">-- Select --</option>
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
    </select>
  </div>
</div>

CSS

#wrapper {
    position: relative;
}

#inputControls {
    position: absolute;
    margin-left: 10px;
    top: 85px;
    left: -5px;
    background-color: white;
    color: black;
    z-index: 10;
    padding: 8px;
    font-size: 8pt;
    font-family: Roboto;
    font-weight: normal;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#inputControls input {
    font-size: 8pt;
    font-family: Roboto;
}

#testMap {
    width: 100%;
    height: 500px;
    position: relative;
    left: -15px;
}

#testDropdownList {
    font-size: 8pt;
}

function initMap() {
  var mapOptions = {
    center: {
      lat: 38.907192,
      lng: 17.036871
    },
    zoom: 2,
    fullscreenControl: true
  };

  testMap = new google.maps.Map(document.getElementById('testMap'), mapOptions);
  testMap.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('inputControls'));

}

$(document).ready(function() {


  initMap();

  $('#testDropdownList').select2({
    theme: "bootstrap"
  });
});

【问题讨论】：

标签： google-maps google-maps-api-3 jquery-select2 select2

【解决方案1】：

页面加载后使用此脚本：

Array.from(document.getElementsByClassName("pac-container pac-logo hdpi")).forEach(function(item) {
   item.style.zIndex = 2147483647;
});

【讨论】：