選擇框中的Javascript標籤

Question

我有下面的代碼來填充選擇框，但我不知道如何在選擇框中添加標籤。

目前，選擇框是如何在兩者之間添加一個標籤顯示爲

Select Location 
    California 
    Florida 
    Madrid 

？

結果應該是

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

任何幫助將是巨大的。提前致謝。

Javascript如下。

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}); 
}); 

選擇框如下。

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

Answer 1

一般情況下，這是與optgroup html元素做了，但沒有魔法，自動化的方式來做到這一點 - 你需要自己構建的HTML。

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

Answer 2

製作一組值變量markerData聲明如下您選項組標籤。

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"} 
    ] 
}; 

和組值添加到選擇選項組方式如下：

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); 
    }); 

例子：

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>