Populating drop down with json object

Question

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 se

Answer 1

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

FIDDLE DEMO

Answer 2

Try this piece of code....jsfiddle it explains where to put the code to select image based on the selected drop down id

Html code

 <select id="dropDownDest">
</select>

jQuery document.ready code

 var a = {
            Cars: [{
                "CarType": "BMW",
                "carID": "bmw123"
            }, {
                "CarType": "mercedes",
                "carID": "merc123"
            }, {
                "CarType": "volvo",
                "carID": "vol123r"
            }, {
                "CarType": "ford",
                "carID": "ford123"
            }]
        };
        $.each(a.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });

Answer 3

Demo

Try this code..

var obj={
Cars: [
     {
      "CarType": "BMW",
      "carID": "bmw123"
      },
       {
      "CarType": "mercedes",
      "carID": "merc123"
       },
       {
      "CarType": "volvo",
      "carID": "vol123r"
        },
        {
      "CarType": "ford",
      "carID": "ford123"
        }
   ]
};

for(var i=0;i<obj.Cars.length;i++)
{
    var option=$('<option></option>').text(obj.Cars[i]['CarType']);
  $('select').append(option);

}