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>

Answer 2

一般来说，这是通过optgroup html元素完成的，但没有神奇的，自动化的方法 - 你需要自己构建HTML。

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

选择框中的Javascript标签

2 个答案: