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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 128

koume

score 156

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

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

HTML

<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;
  //市選択肢が1つだったとき用の保存変数
  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();
    }
  });

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

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

  });


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/06 14:40

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • JavaScriptに関する質問
  • 2つのselectボックスを連動させ1つ目の選択肢によって2つ目の選択肢が自動的に切り替わるようにしたいのですが上手く動いてくれません。