如何用json数据动态填充下拉列表(分为三个不同的下拉列表)，并在单击时遇到操作

Question

我是json的新手，对它一无所知，但看到它的强大功能，我计划改用它以获得更好的性能。在我的网络应用程序中，我有三个不同的下拉列表：轿车、舱口和SUV。
我希望，每当用户点击其中任何一个，比如说舱口，json文件中所有舱口的"名称"都会加载到下拉列表中。当用户点击舱口的任何名称时，相应的价格和汽车制造商公司将显示在html页面的id="show"内容中
我需要调用什么jquery代码段才能完成这项工作/我应该如何处理。我是jquery的新手，对json一无所知，所以如果能提供一些帮助/指导，我们将不胜感激

提前感谢，请查找文件内容以获得更多更好的想法。

我的html文件的内容(我正在使用twitter引导程序)

<div id="abc">
<!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Hatch</button><ul class="dropdown-menu">
<li><a href="#">Hatch names here one below the other</a></li>
<li><a href="#">Next Hatch name here</a></li>
<li><a href="#">Next Hatch name here</a></li>
</ul>
</div><!-- /btn-group -->

<!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Sedan</button><ul class="dropdown-menu">
<li><a href="#">Sedan names here one below the other</a></li>
<li><a href="#">Next Sedan name here</a></li>
<li><a href="#">Next Sedan name here</a></li>
</ul>
</div><!-- /btn-group -->
<!-- btn-group --> <div class="btn-group"><button type="button" class="btn dropdown-toggle" data-toggle="dropdown">SUV</button><ul class="dropdown-menu">
<li><a href="#">SUV names here one below the other</a></li>
<li><a href="#">Next SUV name here</a></li>
<li><a href="#">Next SUV name here</a></li>
</ul>
</div><!-- /btn-group -->

</div>

<div id="show"><!-- Show the content related to the item clicked in either of the lists here --></div>

我的json文件的内容(旨在本地存储在网站的根文件夹中)

{
"Hatch": [
{
"name": "Fiesta",
"price": "1223",
"maker": "Ford"
},
{
"name": "Polo",
"price": "3453",
"maker": "VW"
}
],
"Sedan": [
{
"name": "Mustang",
"price": "1223",
"maker": "Ford"
},
{
"name": "Jetta",
"price": "3453",
"maker": "VW"
}
],
"SUV": [
{
"name": "Santa Fe",
"price": "1223",
"maker": "Hyundai"
},
{
"name": "Evoque",
"price": "3453",
"maker": "Land Rover"
}
]
}

Answer 1

这是为了学习，所以看起来很好，这是我善良的一天^^^:

引导：http://bootply.com/113296

JS：

$(document).ready(function(){
for( index in json.Hatch )
{
$('#hatch ul').append('<li><a href="#" data-maker="'+json.Hatch[index].maker+'" data-price="'+json.Hatch[index].price+'">'+json.Hatch[index].name+'</a></li>');
}
for( index in json.Sedan )
{
$('#sedan ul').append('<li><a href="#" data-maker="'+json.Sedan[index].maker+'" data-price="'+json.Sedan[index].price+'">'+json.Sedan[index].name+'</a></li>');
}
for( index in json.SUV )
{
$('#suv ul').append('<li><a href="#" data-maker="'+json.SUV[index].maker+'" data-price="'+json.SUV[index].price+'">'+json.SUV[index].name+'</a></li>');
}

$('a').on('click', function(){
$('#show').html(   'Price : ' + $(this).attr('data-price') + '| Maker : ' +  $(this).attr('data-maker')   );
});
});

Answer 2

这应该会让你走上正确的道路。

$.getJSON('pathToFile',function(json){ //get data from file
$('#abc').on('click','button',function(){ //bind the button tag click event
var buttonVal = $(this).html();
var ul = $(this).siblings();
$(ul).empty();
$.each(json[buttonVal],function(i,v){ //iterate over each value in the data 
$(ul).append('<li><a href="#" >'+v.name+'</a></li>'); //add data object to the li tag.
var li = $(ul).children()[i];
$(li).data(v);
});   
});
$('#abc').on('click','a',function(){ //bind a tag click event to list item
$('#show').empty(); 
var car = $(this).parent();
var cardata = $(car).data();
$('#show').html(cardata.name+' : '+cardata.price+' : '+cardata.maker); //use the data from the li tag. 
});
});

看看它的工作原理：jsfiddle json数据是一个名为json的对象