我设法用json对象填充下拉菜单,效果很好。目前,我正在尝试根据从下拉菜单中选择的选项显示隐藏div中的图像。当下拉列表由json对象填充时,我将如何检索图像数据。
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文件
{ Cars: [{ "CarType": "BMW", "carID": "bmw123" }, { "CarType": "mercedes", "carID": "merc123" }, { "CarType": "volvo", "carID": "vol123r" }, { "CarType": "ford", "carID": "ford123" }] }
这就是我使用jquery填充下拉菜单的方式。
$(document).ready(function() { $.getJSON("../cars.json", function(obj) { $.each(obj.cars, function(key, value) { $("#dropDownCars").append("<option>" + value.carsName + "</option>"); }); }); });
jfiddle中任何有效的示例,将不胜感激!谢谢。
$('#dropDownDest').on('change', function() { if ($(this).val() == 'vol123r') { $('#imghide').removeClass('hide'); } else { $('#imghide').addClass('hide'); } });
现场演示