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

我是json的新手并且不知道它的一件事,但看到它给出的力量,我打算切换到它以获得更好的性能.在我的网络应用程序中,我有三个不同的下拉列表：说轿车,舱口盖和SUV.
我希望,只要用户点击其中任何一个,比如孵化,json文件中所有阴影的“名称”就会被加载到下拉列表中.当用户点击舱口的任何名称时,相应的价格和汽车制造商公司将被显示在html页面的id =“show”的内容中.我应该调用什么 jquery片段才能完成这项工作/我将如何进行.我是jquery的新手,对json一无所知,所以一点帮助/指导将会受到赞赏,请提前查看文件的内容以获得更好的想法.

我的html文件的内容(我正在使用twitter bootstrap)

<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",{
            "name": "Jetta","SUV": [
        {
            "name": "Santa Fe","maker": "Hyundai"
        },{
            "name": "Evoque","maker": "Land Rover"
        }
    ]
}

解决方法

这是学习所以看起来很好,这是我善良的一天^^^：

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

原文地址：https://www.jb51.cc/js/158955.html