使用 json 对象填充下拉列表 [英] Populating drop down with json object
本文介绍了使用 json 对象填充下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我设法用一个 json 对象填充我的下拉菜单,效果很好.目前,我正在尝试根据从下拉列表中选择的选项显示隐藏 div 中的图像.由于下拉列表由 json 对象填充,我将如何检索图像数据.
HTML
JSON 文件
<代码>{汽车: [{"CarType": "宝马","carID": "bmw123"}, {"CarType": "梅赛德斯","carID": "merc123"}, {"CarType": "沃尔沃","carID": "vol123r"}, {"CarType": "福特","carID": "ford123"}]}
这就是我使用 jquery 填充下拉菜单的方式.
$(document).ready(function() {$.getJSON("../cars.json", function(obj) {$.each(obj.cars, function(key, value) {$("#dropDownCars").append("");});});});
jfiddle 中的任何工作示例,将不胜感激!谢谢.
解决方案
$('#dropDownDest').on('change', function() {如果 ($(this).val() == 'vol123r') {$('#imghide').removeClass('hide');} 别的 {$('#imghide').addClass('hide');}});
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 File
{
Cars: [{
"CarType": "BMW",
"carID": "bmw123"
}, {
"CarType": "mercedes",
"carID": "merc123"
}, {
"CarType": "volvo",
"carID": "vol123r"
}, {
"CarType": "ford",
"carID": "ford123"
}]
}
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>");
});
});
});
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');
}
});
这篇关于使用 json 对象填充下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文