选择框中的 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

使组值变量 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>