質問をすることでしか得られない、回答やアドバイスがある。

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

ただいまの
回答率

87.78%

連動するセレクトボックスの組が1ページに複数存在する場合

解決済

回答 1

投稿

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

score 11

前提・実現したいこと

お世話になっております。
下記サイトを参考に、javascriptにて2つのセレクトボックスが連動しているものを作ろうと思っているのですが
プラグイン不要! jQueryで複数のセレクトボックスの選択肢を連動させる

ユーザの状態によって、その連動したセレクトボックスの組が、1ページ内に複数存在し、
今選択したセレクトボックスに紐付いたセレクトボックスだけしか変動させたくない場合、どのようにしたら良いでしょうか?

親セレクトボックス1を操作すると子セレクトボックス1が変化するが、その他のセレクトボックスには影響させない。

[親セレクトボックス1][子セレクトボックス1]
[親セレクトボックス2][子セレクトボックス2]
[親セレクトボックス3][子セレクトボックス3]
……

セレクトボックスの組はデータによって変動します。
htmlは動的に生成できるので、class名をparent1, parent2, children1, children2 と番号振っていくことは可能です。

何か方針やヒントでも、頂けたらと思います。よろしくお願い致します。

該当のソースコード

var $children = $('.children'); //都道府県の要素を変数に入れます。
var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく

//地方側のselect要素が変更になるとイベントが発生
$('.parent').change(function() {

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

  //削除された要素をもとに戻すため.html(original)を入れておく
  $children.html(original).find('option').each(function() {
    var val2 = $(this).data('val'); //data-valの値を取得

    //valueと異なるdata-valを持つ要素を削除
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }

  });

  //地方側のselect要素が未選択の場合、都道府県をdisabledにする
  if ($(this).val() == "") {
    $children.attr('disabled', 'disabled');
  } else {
    $children.removeAttr('disabled');
  }

});
<select class="parent" name="foo">
  <option value="" selected="selected">地方を選択</option>
  <option value="北海道・東北">北海道・東北</option>
  <option value="関東">関東</option>
  <option value="甲信越・北陸">甲信越・北陸</option>
  <option value="東海">東海</option>
  <option value="関西">関西</option>
  <option value="中国">中国</option>
  <option value="四国">四国</option>
  <option value="九州・沖縄">九州・沖縄</option>
</select>

<select class="children" name="bar" disabled>
  <option value="" selected="selected">都道府県を選択</option>
  <option value="北海道" data-val="北海道・東北">北海道</option>
  <option value="青森県" data-val="北海道・東北">青森県</option>
  <option value="岩手県" data-val="北海道・東北">岩手県</option>
  <option value="宮城県" data-val="北海道・東北">宮城県</option>
  <option value="秋田県" data-val="北海道・東北">秋田県</option>
  <option value="山形県" data-val="北海道・東北">山形県</option>
  <option value="福島県" data-val="北海道・東北">福島県</option>
  <option value="茨城県" data-val="関東">茨城県</option>
  <option value="栃木県" data-val="関東">栃木県</option>
  <option value="群馬県" data-val="関東">群馬県</option>
  <option value="埼玉県" data-val="関東">埼玉県</option>
  <option value="千葉県" data-val="関東">千葉県</option>
  <option value="東京都" data-val="関東">東京都</option>
  <option value="神奈川県" data-val="関東">神奈川県</option>
  <option value="新潟県" data-val="甲信越・北陸">新潟県</option>
  <option value="富山県" data-val="甲信越・北陸">富山県</option>
  <option value="石川県" data-val="甲信越・北陸">石川県</option>
  <option value="福井県" data-val="甲信越・北陸">福井県</option>
  <option value="山梨県" data-val="甲信越・北陸">山梨県</option>
  <option value="長野県" data-val="甲信越・北陸">長野県</option>
  <option value="岐阜県" data-val="東海">岐阜県</option>
  <option value="静岡県" data-val="東海">静岡県</option>
  <option value="愛知県" data-val="東海">愛知県</option>
  <option value="三重県" data-val="東海">三重県</option>
  <option value="滋賀県" data-val="関西">滋賀県</option>
  <option value="京都府" data-val="関西">京都府</option>
  <option value="大阪府" data-val="関西">大阪府</option>
  <option value="兵庫県" data-val="関西">兵庫県</option>
  <option value="奈良県" data-val="関西">奈良県</option>
  <option value="和歌山県" data-val="関西">和歌山県</option>
  <option value="鳥取県" data-val="中国">鳥取県</option>
  <option value="島根県" data-val="中国">島根県</option>
  <option value="岡山県" data-val="中国">岡山県</option>
  <option value="広島県" data-val="中国">広島県</option>
  <option value="山口県" data-val="中国">山口県</option>
  <option value="徳島県" data-val="四国">徳島県</option>
  <option value="香川県" data-val="四国">香川県</option>
  <option value="愛媛県" data-val="四国">愛媛県</option>
  <option value="高知県" data-val="四国">高知県</option>
  <option value="福岡県" data-val="九州・沖縄">福岡県</option>
  <option value="佐賀県" data-val="九州・沖縄">佐賀県</option>
  <option value="長崎県" data-val="九州・沖縄">長崎県</option>
  <option value="熊本県" data-val="九州・沖縄">熊本県</option>
  <option value="大分県" data-val="九州・沖縄">大分県</option>
  <option value="宮崎県" data-val="九州・沖縄">宮崎県</option>
  <option value="鹿児島県" data-val="九州・沖縄">鹿児島県</option>
  <option value="沖縄県" data-val="九州・沖縄">沖縄県</option>
</select>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

<div class="pref_set">
    <select class="areas"></select>
    <select class="prefectures"></select>
</div>

<div class="pref_set">
    <select class="areas"></select>
    <select class="prefectures"></select>
</div>

<div class="pref_set">
    <select class="areas"></select>
    <select class="prefectures"></select>
</div>

こんな感じでグループ化しておけば、

$(".areas").on('change', function(){
  let val = $(this).val();
  let  prefectures = $(this).parents('.pref_set').find('.prefectures');
});

関連する.prefecturesが特定できるし、

<select class="areas"></select>
<select class="prefectures"></select>

<select class="areas"></select>
<select class="prefectures"></select>

<select class="areas"></select>
<select class="prefectures"></select>

こうなっていても

$(".areas").on('change', function(){
  let val = $(this).val();
  let  prefectures = $(this).after('.prefectures');
});

で特定できます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/18 17:32

    グループ化! ありがとうございます。試してみます。

    キャンセル

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る