jsonのデータからセレクトボックスの値を作成し、セレクト変更毎に表示させるデータを連動させたい

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データを表示させたいのですが、方法がわからず苦戦しています。
どなたかご教示頂けますと幸いです。
よろしくお願い致します。