Populating drop down with json object

drop-down-menu, jquery, json

Solution

$('#dropDownDest').on('change', function() {
    if ($(this).val() == 'vol123r') {
        $('#imghide').removeClass('hide');
    } else {
        $('#imghide').addClass('hide');
    }
});

FIDDLE DEMO

Problem

I have managed to populate my drop down menu with a json object, which worked fine. Currently I am trying to display an image which is in a hidden div based on an option selected from the drop down. As the drop down is populated by the json object how would I retrieve the image data. Html ``` <form> <fieldset id="autoHeight"> <legend>pod</legend> <h2>Cars</h2> <select name="drop_down" id="dropDownCars"> <option value="None" selected="Selected">Select type</option> </select> </fieldset> </form> <div id="showBmw" class="hidden"> <a href="http://cdn.iphoneincanada.ca/wp-content/uploads/2012/08/white-bmw.jpg"></a> </div> ``` JSON File ``` { Cars: [{ "CarType": "BMW", "carID": "bmw123" }, { "CarType": "mercedes", "carID": "merc123" }, { "CarType": "volvo", "carID": "vol123r" }, { "CarType": "ford", "carID": "ford123" }] } ``` This is how I populate the dropdown menu using jquery. ``` $(document).ready(function() { $.getJSON("../cars.json", function(obj) { $.each(obj.cars, function(key, value) { $("#dropDownCars").append("<option>" + value.carsName + "</option>"); }); }); }); ``` Any working example in jfiddle, would be very much appreciated! Thanks.

Original source