２つのselectボックスを連動させ1つ目の選択肢によって2つ目の選択肢が自動的に切り替わるようにしたいのですが上手く動いてくれません。

Question

1つ目のselectボックスは都道府県の選択ボックスです。
2つ目のselectボックスは市区町村の選択ボックスです。
やりたいことは、都道府県が選択されたときに、その選択内容に応じた市区町村の選択内容が表示されるようにしたいのです。
表示はできていて都道府県は選択出来る状態です。

一応、コードを記述しましたが、都道府県を選択しても、2つ目の選択ボックスがなにも反応してくれないのです。　コードは以下になります。

ＨＴＭＬ

<div id="banner-message">
<!--   <p>Hello World</p>
   -->  <!-- <button>Change color</button> -->
  <select  class="parent">
    <option value="" selected="selected" label="-- 選択 --">-- 選択--</option>
    <option value="北海道">北海道</option>
    <option value="青森">青森</option>
    <option value="岩手">岩手</option>
</select>

<select class="child" disabled>
    <option value="" label="-- 選択2 --" selected="selected" data-val="default">-- 選択2 --</option>
    <option value="01" data-val="北海道">札幌市</option>
    <option value="02" data-val="北海道">釧路市</option>
    <option value="03" data-val="青森">青森市</option>
    <option value="04" data-val="岩手">盛岡市</option>
</select>
</div>

javascript

var $children = $('.parent'); //都道府県の要素を変数に入れます。
var options = $('.child').find("option");


$('.parent').change(function() {

    //市セレクトの初期化
    $.each(options,function(index,value){   
    $(value).removeAttr("selected");
    if($(value).data("val") == "default"){
        $(value).attr("selected","selected");
    }
      $(value).show();
  });

  //選択された地方のvalueを取得し変数に入れる
  var val1 = $(this).val();

  //市選択肢カウンタ
  var option_count = 0;
  //市選択肢が１つだったとき用の保存変数
  var option_select = "";

    //市選択肢の表示切り替え
  $.each(options,function(index,value){
    var city_option = $(value);
    if(city_option.data("val") == "default"){
        //初期値選択肢用（-- 選択2 --）
        city_option.attr("selected","selected");
    }else if(city_option.data("val") == val1){
        //選択された県に当てはまる場合はカウントを増やし、option_selectに格納
        option_count++;
      option_select = city_option;
    }else{
        //選択された県にあてはまらない場合は、隠す
      city_option.hide();
    }
  });

  //市の選択肢が１つしかない場合は、自動的に選択された状態に変更
  if(option_count == 1){
      option_select.attr("selected","selected");
  }

  //市セレクトを選択可能に
  $('.child').prop("disabled", false);

  });

原因が特定出来ないのと、対応がわからず手が出ない状態ですのでどなたかご教授お願いいたします。

Answer 1

サンプルで載せられていたHTMLとコードで動作確認してみましたが正しく動いているようです。
多分、他の場所（例えば、jQueryの読み込みに失敗している等）の問題ではないでしょうか。

Comments

[koume]

回答有難うございます。45_Shingoさんの言う通り、jQueryの読み込みに失敗していたようでした。
Railsでアプリを作成していますが、
$ bundle exec assets:precompileを実行したらサンプルコードは上手く動いてくれました。
膨大な量ですが、おかげさまで全国の市区町村の入力に移行できます。
今後とも宜しくお願いします。