google-maps - 下拉菜单不适用于 chrome、IE 并且仅适用于 Firefox

Question

我使用 GMap 上的下拉列表来选择所需的区域。它仅适用于 Firefox，在其他浏览器中，当我选择区域时它什么也不做。这是我的代码：

          $.getJSON("sample2.php", {}, function(data){
          $.each(data.places2, function(i, item){

                // $("#markers1").append('<li><a href="#" rel="' + i + '">' + item.title2 +              '</a></li>');
        $("#markers").append('<option value="' + i+ '">' + item.title2 +'</option>');
        latlngbounds2.extend(new google.maps.LatLng(item.lat2, item.lng2));
        map.setCenter( latlngbounds2.getCenter(), map.fitBounds(latlngbounds2));
        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(item.lat2, item.lng2),
            title: item.title2
            // map: map
        });
        arrMarkers2[i] = marker2;
        var infowindow2 = new google.maps.InfoWindow({
            content: "<h3>"+ item.title2 +"</h3>" +"<p>"
        });
        arrInfoWindows2[i] = infowindow2;
    });
});
 }
  $(function  (){

mapInit();

   // $('#markers option').click(function() {
     $("#markers option").live("click", function (){
    var i = $(this).attr("value");
    // Эта строка кода, закрывает все открытые балуны, для открытия выбранного
    for(x=0; x < arrInfoWindows2.length; x++){ arrInfoWindows2[x].close(); }
    //arrInfoWindows2[i].open(map, arrMarkers2[i]);
    map.setZoom(12);
    map.setCenter(arrMarkers2[i].getPosition());
    //  alert(arrMarkers2[i]);
    console.info(arrMarkers2[i]['title']);

});
}); 

这是 HTML 代码：

       <div name="cont" id="container" >
     <select id="markers">
     <option>Select Region</option>
     </select>
      </div>

有人可以帮忙吗？

Answer 1

您是否尝试change在下拉菜单中使用而不是click在选项中使用？

$("#markers").change(function() {
    var i = $(this).val();

    for (x=0; x < arrInfoWindows2.length; x++) {
        arrInfoWindows2[x].close();
    }

    map.setZoom(12);
    map.setCenter(arrMarkers2[i].getPosition());
    console.info(arrMarkers2[i]['title']);
});