Wypełnianie listy rozwijanej za pomocą obiektu json

Question

Udało mi się wypełnić moje rozwijane menu obiektem Json, który działał prawidłowo. Obecnie próbuję wyświetlić obraz, który jest ukryty div na podstawie opcji wybranej z menu rozwijanego. Ponieważ rozwijane jest wypełniane przez obiekt json, w jaki sposób mogę pobrać dane obrazu.

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 pliku

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

To jak ja zapełnić menu rozwijane przy użyciu jQuery.

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

Każdy działający przykład w jfiddle, byłby bardzo ceniony! Dzięki.

Answer 1

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

FIDDLE DEMO

Answer 2

Demo

Spróbuj tego kodu ..

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

} 

Answer 3

Spróbuj kawałek kodu .... jsfiddle wyjaśnia gdzie umieścić kod do sel ect obraz na podstawie wybranego rozwijanej ID

kodu

Html

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

jQuery Kod document.ready

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