Question

186

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

rated 0 times [ 187] [ 1] / answers: 1 / hits: 29211 / 10 Years ago, thu, february 13, 2014, 12:00:00

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

        }

    ]

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

piper

Add To Favorites

Follow

Total Points: 734

Total Questions: 93

Total Answers: 112

Location: Burundi

Member since Wed, Apr 6, 2022

2 Years ago

answered 10 Years ago lucianom · Accepted Answer

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

  });

});