选择框中的Javascript标签

我有下面的代码来填充选择框，但我不知道如何在选择框内添加标签

此时，选择框显示为

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>

var映射；
var markerData=[
{lat:36.4，lng:-120.9，zoom:7，name:“California”}，
{lat:28，lng:-81，zoom:7，名字：“Florida”}，
{lat:40.39，lng:-3.67，zoom:8，名字：“马德里”}，
];
函数初始化（）{
map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：3，
中心：{lat:2.432054，lng:106.995850}
});
forEach（函数（数据）{
var newmarker=new google.maps.Marker({
地图：地图，
位置：{lat:data.lat，lng:data.lng}，
标题：data.name
});
jQuery（“#selectlocation”）.append（“”+data.name+“”）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
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}）；
});

选择框如下所示

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>

选择位置

---

一般来说，这是通过html元素完成的，但是没有神奇的、自动化的方法来完成——您需要自己构建html

加利福尼亚
佛罗里达州
马德里

一般来说，这是通过html元素完成的，但是没有神奇的、自动化的方法来完成——您需要自己构建html

加利福尼亚
佛罗里达州
马德里

创建组值变量

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$select=$（'#selectlocation'）；
$。每个（选项、功能（键、值）{
var组=$（''）；
$.each（值，函数（）{
$（''）.html（this.name）.appendTo（组）；
});
group.appendTo（$select）；
});  

示例：

var opt={
美国：[
{lat:36.4，lng:-120.9，zoom:7，name:“California”}，
{lat:28，lng:-81，zoom:7，名字：“Florida”}，
],
马德里：[
{lat:40.39，lng:-3.67，zoom:8，名字：“马德里”}
]
};
$（函数（）{
var$select=$（“#selectlocation”）；
$。每个（选项、功能（键、值）{
var组=$（''）；
$.each（值，函数（）{
$（''）.html（this.name）.appendTo（组）；
});
group.appendTo（$select）；
});
});

选择位置
创建组值变量
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$select=$（'#selectlocation'）；
$。每个（选项、功能（键、值）{
var组=$（''）；
$.each（值，函数（）{
$（''）.html（this.name）.appendTo（组）；
});
group.appendTo（$select）；
});  

示例：


var opt={
美国：[
{lat:36.4，lng:-120.9，zoom:7，name:“California”}，
{lat:28，lng:-81，zoom:7，名字：“Florida”}，
],
马德里：[
{lat:40.39，lng:-3.67，zoom:8，名字：“马德里”}
]
};
$（函数（）{
var$select=$（“#selectlocation”）；
$。每个（选项、功能（键、值）{
var组=$（''）；
$.each（值，函数（）{
$（''）.html（this.name）.appendTo（组）；
});
group.appendTo（$select）；
});
});

选择位置
为了提供适当的“标签”，您希望JavaScript如何理解或欣赏给定城市所在的国家？尽管我建议您使用元素。您应该查看HTML的
元素，但您仍然需要知道将它们放在哪里。您希望JavaScript如何理解或欣赏给定城市所在的国家，以便提供适当的“标签”？虽然我建议您使用元素。您应该查看HTML的
元素，但您仍然需要知道将它们放在何处。