user2721700 user2721700 - 1 year ago 76
JSON Question

Populating drop down with json object

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.


<fieldset id="autoHeight">
<select name="drop_down" id="dropDownCars">
<option value="None" selected="Selected">Select type</option>
<div id="showBmw" class="hidden">
<a href=""></a>


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(, function(key, value) {
$("#dropDownCars").append("<option>" + value.carsName + "</option>");

Any working example in jfiddle, would be very much appreciated! Thanks.

Answer Source
$('#dropDownDest').on('change', function() {
    if ($(this).val() == 'vol123r') {
    } else {