26799

[code]

    var data = [
        {
          "id": 1,
          "station":"SHIN AOMORI",
          "info":"青森県"
        },
        {
          "id": 2,
          "station":"HACHINOHE",
          "info":"青森県"
        },
        {
          "id": 3,
          "station":"AKITA",
          "info":"秋田県i"
        },
        {
          "id": 4,
          "station":"MORIOKA",
          "info":"岩手県"
        },
        {
          "id": 5,
          "station":"SHINJYO",
          "info":"山形県"
        },
        {
          "id": 6,
          "station":"SENDAI",
          "info":"宮城県"
        },
        {
          "id": 7,
          "station":"YAMAGATA",
          "info":"山形県"
        },
        {
          "id": 8,
          "station":"FUKUSHIMA",
          "info":"福島県"
        }
      ]
    
    jQuery(document).ready(function($) {
      for(var i in data) {
        $("#nameData").append("<option value=" +data[i].id + ">" + data[i].station +  "</option>");
      }
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <label class="label">Destination</label>
    <p class="control">
       <span class="select has-text-centered">
         <select id="nameData"></select>
      　</span>
    </p>
    <div id="info"></div>
[/code]

上記のようなjsonオブジェクトを使い、動的にセレクトボックスを作成しましたが、  
セレクトの`val()`と連動して`$('#info')`にjsonオブジェクトから同じidを持つinfoデータを表示させたいのですが、方法がわからず苦戦しています。  
どなたかご教示頂けますと幸いです。  
よろしくお願い致します。


CC BY-SA 3.0
2016-06-16T15:10:01.777
26798
2016-06-16T15:43:00.633
8500
question
javascript json
jsonのデータからセレクトボックスの値を作成し、セレクト変更毎に表示させるデータを連動させたい


方法は他にもあると思いますが、  
`.val()`であらかじめ設定されている`id`の番号が得られて、  
`id`は配列の添字の＋１ですから`data[$(this).val()-1].info`で`info`が得られます。  
それで、  
`change`イベントで`info`のテキストを更新するようにします。  
`change`イベントで変更するので、最初の値(info)についてはあらかじめ設定しておく必要があります。  
以下コード

[code]

    jQuery(document).ready(function($) {
      for(var i in data) {
        $("#nameData").append("<option value=" +data[i].id + ">" + data[i].station +  "</option>");
      }
      //追加のコード
      $("#nameData").change(function(){
        $("#info").text(data[$(this).val()-1].info);
      });
    });
    
[/code]


CC BY-SA 3.0
2016-06-16T15:43:00.633
26799
2016-06-16T15:43:00.633
5044
26798
answer