Learner Always Learner Always - 4 years ago 157
Javascript Question

How to populate a dropdown list with json data dynamically (section wise into three different dropdowns) and have an action encountered on click

I am new to json and do not know a single thing about it, but seeing the power it gives, I am planning to switch over to it for a better performance. In my web application I have three different dropdown lists: say sedans, hatch and SUV.

I want, whenever a user clicks on either of them, say hatch, the "name" of all the hatches in the json file gets loaded into the dropdown list. When the user clicks on any name of the hatch, corresponding price and carmaker company gets shown into the content of

id="show"
of the html page.
What should be the jquery snippet that I need to call to get this done/how shall I be proceeding. I'm a newbie to jquery, and know nothing about json, so a little help/guidance will be appreciated

Thanks in advance, please find the content of the files for more better idea.

Contents of my html file (I'm using 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>



Contents of my json file (intended to store locally in the website's root folder)


{
"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 Source

It's to learn so look well, it's my day of kindness ^^^:

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')   );
  });
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download