web-dev-qa-db-ja.com

ドロップダウンリストにjsonデータを動的に入力し（セクションごとに3つの異なるドロップダウンに）、クリック時にアクションを実行する方法

私はjsonを初めて使用し、それについて1つも知りませんが、jsonが提供するパワーを見て、パフォーマンスを向上させるためにjsonに切り替えることを計画しています。私のWebアプリケーションには、セダン、ハッチ、SUVの3つの異なるドロップダウンリストがあります。
ユーザーがハッチなどのいずれかをクリックするたびに、jsonファイル内のすべてのハッチの「名前」がドロップダウンリストに読み込まれるようにします。ユーザーがハッチの名前をクリックすると、対応する価格と自動車メーカーの会社がhtmlページのid="show"のコンテンツに表示されます。
これを実行するために呼び出す必要のあるjqueryスニペットは何ですか/どのように進めますか。私はjqueryの初心者であり、jsonについて何も知らないので、少しのヘルプ/ガイダンスをいただければ幸いです。

よろしくお願いします。より良いアイデアを得るためにファイルの内容を見つけてください。

私のhtmlファイルの内容（私はTwitterブートストラップを使用しています）

<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ファイルの内容（Webサイトのルートフォルダーにローカルに保存することを目的としています）

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


javascriptjqueryhtmljsontwitter-bootstrap
8
Learner Always

よく見ることを学ぶことです、それは私の親切な日です^^^：

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

これはあなたを正しい道に導くはずです。

$.getJSON('pathToFile',function(json){ //get data from file
  $('#abc').on('click','button',function(){ //bind the button tag click event
    var buttonVal = $(this).html();
    var ul = $(this).siblings();
    $(ul).empty();
    $.each(json[buttonVal],function(i,v){ //iterate over each value in the data 
        $(ul).append('<li><a href="#" >'+v.name+'</a></li>'); //add data object to the li tag.
    var li = $(ul).children()[i];
    $(li).data(v);
    });   
  });
  $('#abc').on('click','a',function(){ //bind a tag click event to list item
    $('#show').empty(); 
    var car = $(this).parent();
    var cardata = $(car).data();
    $('#show').html(cardata.name+' : '+cardata.price+' : '+cardata.maker); //use the data from the li tag. 
  });
});

動作を確認してください： jsfiddle jsonデータはjsonというオブジェクトです

3
manta