JSON dropdown menu

by George Obregon

HTML

<select id= "dropDownDest">
</select>
<div id='imghide' class='hide'>
    <img src='som img' />
    
</div>

CSS

.hide{
    display:none;
}

JavaScript

var inputURL = 'https://api.myjson.com/bins/zpblu'

var json = 
[{"city":"Heredia","city_ascii":"Heredia","lat":9.991997986,"lng":-84.12000251,"pop":21947,"country":"Costa Rica","iso2":"CR","iso3":"CRI","province":"Heredia"},{"city":"Cartago","city_ascii":"Cartago","lat":9.86997764,"lng":-83.92997807,"pop":111770,"country":"Costa Rica","iso2":"CR","iso3":"CRI","province":"Cartago"}]
;

$(document).ready(function()
{
    $.getJSON("/echo/json/",function(obj)
   {
         $.each(json,function(key,value)
         {
             var option = $('<option />').val(value.city).text(value.city);
        $("#dropDownDest").append(option);
         });

    });

    //if the selcted is volvo, then display the img
    $('#dropDownDest').on('change', function(){
        if($(this).val() == 'Heredia'){
            $('#imghide').removeClass('hide');
        }else{
            $('#imghide').addClass('hide');
        }
    
    });
});