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

Question

我是json的新手并不知道它的一件事,但看到它给出的功率,我打算切换到它以获得更好的性能.在我的网络应用程序中,我有三个不同的下拉列表:说轿车,舱口和SUV.
我希望,只要用户点击其中任何一个,比如孵化,json文件中所有阴影的"名称"就会被加载到下拉列表中.当用户点击舱口的任何名称时,相应的价格和汽车制造商公司会显示id="show"在html页面的内容中.
应该调用什么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",
            "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

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

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