Javascript-Label in der Auswahlbox

Question

Ich habe den Code unten, um eine Auswahlbox zu füllen, aber ich weiß nicht, wie man ein Etikett in der Auswahlbox hinzufügt.

Im Moment wird das Auswahlfeld als

angezeigt

Select Location 
    California 
    Florida 
    Madrid 

Wie füge ich ein Label dazwischen?

sollte das Ergebnis

Select Location 
USA (label) 
    California 
    Florida 
Spain (label) 
    Madrid 

jede mögliche Hilfe wäre toll. Danke im Voraus.

Javascript wie unten.

var map; 

var markerData= [ 
    {lat: 36.4 , lng: -120.9 , zoom: 7 , name: "California"}, 
    {lat: 28 , lng: -81 , zoom: 7 , name: "Florida"}, 
    {lat: 40.39 , lng: -3.67 , zoom: 8 , name: "Madrid"}, 
]; 

function initialize() { 
     map = new google.maps.Map(document.getElementById('map-canvas'), { 
      zoom: 3, 
      center: {lat: 2.432054, lng: 106.995850} 
     }); 
     markerData.forEach(function(data) { 
      var newmarker= new google.maps.Marker({ 
       map:map, 
       position:{lat:data.lat, lng:data.lng}, 
       title: data.name 
      }); 
      jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>'); 
     }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

jQuery(document).on('change','#selectlocation',function() { 
    var latlngzoom = jQuery(this).val().split('|'); 
    var newzoom = 1*latlngzoom[2], 
    newlat = 1*latlngzoom[0], 
    newlng = 1*latlngzoom[1]; 
    map.setZoom(newzoom); 
    map.setCenter({lat:newlat, lng:newlng}); 
}); 

Wählen Sie das Feld wie folgt aus.

<select id="selectlocation" class="btn btn-default btn-select btn-select-light"> 
    <option class="btn-select-value" value="">Select Location</option> 
</select> 

Answer 1

Im Allgemeinen wird dies mit dem optgroup html-Elemente gemacht, aber es gibt keine Magie, automatisierte Art und Weise, dies zu tun - Können Sie die HTML selbst aufbauen müssen.

<select> 
 
    <optgroup label="USA"> 
 
    <option>California</option> 
 
    <option>Florida</option> 
 
    </optgroup> 
 
    <optgroup label="Spain"> 
 
    <option>Madrid</option> 
 
    </optgroup> 
 
</select>

Answer 2

eine Gruppe Wertvariable markerData machen erklären, wie Sie die Option Gruppen-Label folgt.

var markerData= { 
    USA :[ 
     {lat: 36.4 , lng: -120.9 , zoom: 7 , name: "California"}, 
     {lat: 28 , lng: -81 , zoom: 7 , name: "Florida"} 
    ], 
    Madrid :[ 
     {lat: 40.39 , lng: -3.67 , zoom: 8 , name: "Madrid"} 
    ] 
}; 

und Gruppenwert an die Auswahloptionsgruppe wie folgt hinzufügen:

var $select = $('#selectlocation'); 
    $.each(opt, function(key, value){ 
     var group = $('<optgroup label="' + key + '" />'); 
     $.each(value, function(){ 
      $('<option />').html(this.name).appendTo(group); 
     }); 
     group.appendTo($select); 
    }); 

Beispiel:

var opt = { 
 
    USA :[ 
 
     {lat: 36.4 , lng: -120.9 , zoom: 7 , name: "California"}, 
 
     {lat: 28 , lng: -81 , zoom: 7 , name: "Florida"}, 
 
    ], 
 
    Madrid:[ 
 
     {lat: 40.39 , lng: -3.67 , zoom: 8 , name: "Madrid"} 
 
    ] 
 
}; 
 

 
$(function(){ 
 
    var $select = $('#selectlocation'); 
 
    $.each(opt, function(key, value){ 
 
     var group = $('<optgroup label="' + key + '" />'); 
 
     $.each(value, function(){ 
 
      $('<option />').html(this.name).appendTo(group); 
 
     }); 
 
     group.appendTo($select); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="selectlocation" class="btn btn-default btn-select btn-select-light"> 
 
    <option class="btn-select-value" value="">Select Location</option> 
 
</select>