Comment remplir une liste déroulante avec les données json de manière dynamique (section sage en trois différentes listes déroulantes) et ont une action rencontré sur cliquez sur

Je suis nouveau sur le json et ne pas connaître une seule chose à son sujet, mais vu la puissance qu'elle donne, j'ai l'intention de passer de l'un à pour une meilleure performance. Dans mon application web, j'ai trois différentes listes déroulantes: dire des berlines, des hachures et des SUV.

Je veux, à chaque fois qu'un utilisateur clique sur l'un d'eux, dire la trappe, le "nom" de tous les trappes dans le fichier json est chargé dans la liste déroulante. Lorsque l'utilisateur clique sur le nom de la trappe, le prix correspondant et constructeur de l'entreprise qui sera affiché dans le contenu de id="show" de la page html.
Quel devrait être le jquery extrait que j'ai besoin d'appeler pour obtenir ce fait, comment dois-je procéder. Je suis un débutant de jquery, et ne sais rien à propos de json, donc un peu d'aide/conseils seront appréciés

Merci à l'avance, s'il vous plaît trouver le contenu des fichiers pour plus de meilleure idée.

Contenu de mon fichier html (je suis en utilisant 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>

Contenu de mon fichier json (destiné à stocker localement dans le site web de la racine du dossier)

{
    "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"
        }
    ]
}

OriginalL'auteur Learner Always | 2014-02-13