本文介绍了用json对象填充下拉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经设法使用一个json对象填充了我的下拉菜单,这很好。
目前,我正在尝试根据从下拉列表中选择的选项显示位于隐藏div中的图像。由于下拉列表由json对象填充,我将如何检索图像数据。
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 selected from the drop down. As the drop down is populated by the json object how would I retrieve the image data.
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填充下拉菜单。
This is how I populate the dropdown menu using jquery.
$(document).ready(function() {
$.getJSON("../cars.json", function(obj) {
$.each(obj.cars, function(key, value) {
$("#dropDownCars").append("<option>" + value.carsName + "</option>");
});
});
});
jfiddle中的任何工作示例,将非常感谢!谢谢。
Any working example in jfiddle, would be very much appreciated! Thanks.
推荐答案
$('#dropDownDest').on('change', function() {
if ($(this).val() == 'vol123r') {
$('#imghide').removeClass('hide');
} else {
$('#imghide').addClass('hide');
}
});
FIDDLE DEMO
这篇关于用json对象填充下拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!