Le remplissage déroulant avec un objet json

J'ai réussi à remplir mon menu déroulant avec un objet json, ce qui a bien fonctionné.
Actuellement j'essaie d'afficher une image qui est caché dans un div basé sur une option sélectionnée dans le menu déroulant. Comme la liste est remplie par l'objet json comment pourrais-je récupérer les données de l'image.

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>

Fichier JSON

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

C'est comment je remplir le menu déroulant à l'aide de jquery.

$(document).ready(function() {
    $.getJSON("../cars.json", function(obj) {
        $.each(obj.cars, function(key, value) {
            $("#dropDownCars").append("<option>" + value.carsName + "</option>");
        });
    });
});

Aucun exemple de travail en jfiddle, serait très apprécié! Merci.

Un violon ou l'affichage de votre code HTML serait utile.
Ajouter un attribut de valeur de l'option et un changement de gestionnaire de la zone de liste déroulante qui se lit l'ID et définit le src de l'image en conséquence. Pour 30 bugs, je vais faire votre travail 😉

OriginalL'auteur user2721700 | 2013-08-28

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

VIOLON DÉMO

Cela fonctionne comme un régal, merci beaucoup pour votre aide.

OriginalL'auteur RAVI MONE

Essayer ce morceau de code....jsfiddle
il explique où mettre le code pour sélectionner l'image fondée sur les déroulant id

Code Html

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

jQuery document.code prêt à l'emploi

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

Vu ce commentaire, cela fait aussi le job. Merci @iblue

OriginalL'auteur iJade

Démo

Essayer ce 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);

}

OriginalL'auteur Prabu Parthipan

Vous devez vous connecter pour publier un commentaire.