finaris finaris - 3 months ago 17
HTML Question

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!

Answer

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