CODEWITHSUNDEEP
javascriptjqueryhtml
Honeybeemy
Honeybeemy

Reputation: 9

Javascript label in select box

I have the code below to populate a select box but I don't know how to add a label inside the select box.

At the moment, the select box is displayed as

Select Location
  California
  Florida
  Madrid

How do I add a label in between?

The result should be

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

Any help would be great. Thanks in advance.

Javascript as below.

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 box is as below.

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



Upvotes: 0

Views: 132

Answers (2)

Saurav Wahid
Saurav Wahid

Reputation: 401

Making a group value variable markerData declare as follows you option group label.

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

And add group value to the select option group Following way :

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

Example : 

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>

Upvotes: 2

Jamiec
Jamiec

Reputation: 136074

In general, this is done with the optgroup html element, but there is no magic, automated way to do this - you need to build the HTML yourself.

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

Upvotes: 1

Related Questions