1

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>");
  }
});
<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>

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

1 件の回答 1

1

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

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);
  });
});
3
  • @BLUEPIXYさん 有難うございました。無事にこちらで実装ができました。 >方法は他にもあると思いますが、 一度$.getJSONを使用などしてみたのですが、いまいち方法をつかめず、上記のように変更してみました。他にはどのような方法があったりするのでしょうか?後学のためにお伺いできると幸いです。
    – user76333
    Commented 2016年6月17日 8:34
  • @kphex val()valueとして設定されているidを読んでいますが、selectedIndex で選択されているoptionの0始まりの番号が得られます。なので、data[$(this).val()-1].infodata[this.selectedIndex].info のようにも書けます。idがどうのではなく単に並びだけの問題。どっちにしろ同じ配列の位置だけを問題としているが、この場合idが飛び飛びでもOK.
    – BLUEPIXY
    Commented 2016年6月17日 8:49
  • また、idをキーとするハッシュのようなJSONデータにすることで、idで該当レコードを持ってくるようにもできます。
    – BLUEPIXY
    Commented 2016年6月17日 8:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。