Javascript 如何使用json数据动态填充下拉列表（按节分为三个不同的下拉列表），并在单击时遇到操作

我是json新手，对它一无所知，但看到它所提供的强大功能，我计划切换到它以获得更好的性能。在我的web应用程序中，我有三个不同的下拉列表：比如sedans、hatch和SUV。
我希望，每当用户单击其中任何一个，比如hatch，json文件中所有图案填充的“名称”都会加载到下拉列表中。当用户单击舱口的任何名称时，相应的价格和汽车制造商公司将显示在html页面的

id=“show”

内容中
我需要调用什么jquery代码段来完成这项工作/我应该如何继续。我是jquery的新手，对json一无所知，因此希望您能提供一些帮助/指导

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

我的html文件的内容（我正在使用twitter引导）

---

这会让你走上正确的道路

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

$.getJSON（'pathToFile'，函数（json）{//从文件中获取数据
$（'#abc'）。在（'click'，'button'，function（）{//绑定按钮标记click事件
var buttonVal=$（this.html（）；
var ul=$（this.sibbins（）；
$（ul）.empty（）；
$.each（json[buttonVal]，函数（i，v）{//迭代数据中的每个值
$（ul）.append（“
”）；//将数据对象添加到li标记。
var li=$（ul.children（）[i]；
$（li）.数据（v）；
});   
});
$（'#abc'）。在（'click'，'a'，function（）{//将标记单击事件绑定到列表项
$（'#show'）.empty（）；
var car=$（this.parent（）；
var cardata=$（car.data（）；
$（“#show”）.html（cardata.name+”：“+cardata.price+”：“+cardata.maker）；//使用li标记中的数据。
});
});

---

查看它的工作情况：json数据是一个名为

json

的对象，学习起来很好，今天是我的好意日^^ ^：

Bootply：

    $(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')   );
  });
});

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

$（文档）.ready（函数（）{
for（json.Hatch中的索引）
{
$（'#hatch ul'）。追加（'
'）；
}
for（json.Sedan中的索引）
{
$（'sedan ul'）。追加（'li>'）；
}
for（json.SUV中的索引）
{
$（'suv ul'）。追加（'li>'）；
}
$（'a'）。在（'click'，function（）上{
$（'#show'）.html（'Price:'+$（this）.attr（'data-Price'）+'| Maker:'+$（this.attr（'data-Maker'））；
});
});

小提琴不起作用。它仅显示最后一个选项，而不考虑在每个按钮中单击的选项。它将数据添加到

ul

。这真的很有效，而且帮助很大。非常感谢你的指导。在这个文件中包含一个外部json文件（通过给出它的路径，因为该文件将与html和其他文件一起保存在根文件夹中）需要遵循什么语法，您就有了变量json。所以在include之后打电话就可以了。不同的问题，相同的答案：）

    $(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')   );
  });
});