Populating thả xuống với đối tượng json

Question

Tôi đã quản lý để cư menu thả xuống của tôi với một đối tượng json, mà làm việc tốt. Hiện tại tôi đang cố hiển thị hình ảnh nằm trong div ẩn dựa trên tùy chọn được chọn từ menu thả xuống. Khi trình đơn thả xuống được điền bởi đối tượng json, tôi sẽ truy xuất dữ liệu hình ảnh như thế nào.

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" 
    }] 
} 

Đây là cách tôi cư menu thả xuống bằng jquery.

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

Bất kỳ ví dụ làm việc nào trong jfiddle, sẽ được đánh giá rất nhiều! Cảm ơn.

Answer 1

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

FIDDLE DEMO

Answer 2

Demo

Hãy thử mã này ..

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

Hãy thử đoạn mã này .... jsfiddle nó giải thích nơi để đặt các mã để chọn vv hình ảnh dựa trên thả xuống chọn id

Html mã

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

jQuery document.ready đang

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