CODEWITHSUNDEEP
jqueryhtmlselect
finaris
finaris

Reputation: 513

jQuery .on() select

I am trying to use jQuery to change a custom map I have depending on the options chosen in a select menu. Currently I have the following:

<select>
      <option lat="37.0902" lng="95.7129" class="country1" zoom="4" map_id="1" value="us">United States</option>
</select>

I'm aware that if it were an image and I desired hovering, the jQuery meant to process it would be:

jQuery('body').on('mouseenter', 'country1', function(event, ui) {
    var mid = jQuery(this).attr('map_id');
    var mlat = jQuery(this).attr('lat');
    var mlon = jQuery(this).attr('lng');
    var mzoom = jQuery(this).attr('zoom');
    var myLatLng = new google.maps.LatLng(mlat,mlon);
    MYMAP[mid].map.setCenter(myLatLng);
    MYMAP[mid].map.setZoom(mzoom);
});

However, I'm unsure what to do in the scenario where the interacted object is a select menu rather than an image. Thank you!

Upvotes: 0

Views: 72

Answers (1)

Derek
Derek

Reputation: 859

Use the change event.

Add an id or class to your select for reference

<select id="country">
    <option lat="37.0902" lng="95.7129" class="country1" zoom="4" map_id="1" value="us">United States</option>
</select>

and then change your javascript to:

$('#country').change(function(event, ui) {
    var mid = jQuery(this).attr('map_id');
    var mlat = jQuery(this).attr('lat');
    var mlon = jQuery(this).attr('lng');
    var mzoom = jQuery(this).attr('zoom');
    var myLatLng = new google.maps.LatLng(mlat,mlon);
    MYMAP[mid].map.setCenter(myLatLng);
    MYMAP[mid].map.setZoom(mzoom);
});

Upvotes: 1

Related Questions