$(document).ready(function(){
    $.getJSON("/nobelsmile/pref/list/", {}, function(j){
          var options = '';
          for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].romaji + '">' + j[i].kanji + '</option>';
          }
          $("select#prefSelect1").html(options);
          $('select#prefSelect1 option:first').attr('selected', 'selected');
          $("select#prefSelect2").html(options);
          $('select#prefSelect2 option:first').attr('selected', 'selected');
        });
    
    $("select#prefSelect1").change(function(){
      $.getJSON("/nobelsmile/area/list/" + $(this).val(), {}, function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) {
          options += '<option value="' + j[i].area_code + '">' + j[i].area_name + '</option>';
        }
        $("select#areaSelect1").html(options);
        $('select#areaSelect1 option:first').attr('selected', 'selected');
      })
    });

    $("select#prefSelect2").change(function(){
      $.getJSON("/nobelsmile/area/list/" + $(this).val(), {}, function(j){
        var options = '';
        for (var i = 0; i < j.length; i++) {
          options += '<option value="' + j[i].area_code + '">' + j[i].area_name + '</option>';
        }
        $("select#areaSelect2").html(options);
        $('select#areaSelect2 option:first').attr('selected', 'selected');
      })
    });
    
  });