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

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

ただいまの
回答率

87.79%

2つのselectボックスを連動させ、2つ目の選択しが1つなら自動的に表示させたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 8,184

score 9

 前提・実現したいこと

selectボックスを二つ用意し、1つ目の選択肢によって2つ目の選択肢が自動的に切り替わるようにしたいです。
かつ、2つ目の選択肢の項目が1つなら、自動的に表示されるようにしたいです。
例えば、下記のソースで言うと、
県の選択で、[北海道]を選ぶと、市の選択は[札幌市]と[釧路市]なので、市のセレクトボックスの初期表示は、[-- 選択--]。[青森]の場合は、[青森市]だけなので、初期表示が[青森市]となるようにしたいです。

選択肢が切り替わるようには下記サイトを参考にしました。
https://try-m.co.jp/blog/web-create/936/

 試したこと

eachでインデックスされている数が1つだったら
valueの値を変えるという考えでできるのかなと思うのですが、
その書き方がわかりません…。
お手数ですが、よろしくお願いいたします。

 該当のソースコード

<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">-- 選択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>
$(function() {
var $children = $('.child'); //市の要素を変数に入れます。
var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく

$('.parent').change(function() {
   //選択された都道府県のvalueを取得し変数に入れる
  var val1 = $(this).val();
   //削除された要素をもとに戻すため.html(original)を入れておく
  $children.html(original).find('option').each(function(i, val) {
    var val2 = $(this).data('val'); //data-valの値を取得
     //valueと異なるdata-valを持つ要素を削除
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
//?インデックスされた数が1の場合は、valueの値をいれる?
    if (i == 1) {
      var val3 = val2.val();
      $('.pairc').val(val3);
    }
   });
   //地方側のselect要素が未選択の場合、都道府県をdisabledにする
  if ($(this).val() == "") {
    $children.attr('disabled', 'disabled');
  } else {
    $children.removeAttr('disabled');
  }
 });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

少しだけ改善しました。

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);

  });

動作確認は以下で
動作確認

  • 市選択肢の制御ロジックの改善(if -> else if)
  • 初期化の中でselectedz要素を削除するように変更

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/31 00:11

    ありがとうございます!
    動作確認先、確認させていただきました。実現したい動作の通りとなっております。
    こちら参考にさせていただきます!
    ソース一つ一つ確認して何をしているか把握していきたいと思います。

    キャンセル

  • 2018/07/31 08:57 編集

    ぱっとソースだけ出しちゃってごめんなさい!
    簡単な流れは
    県セレクトチェンジイベント

    市セレクト初期化

    選択した県に合致する市以外をhiddenに、合致した場合はカウンタを1増やしてoption要素を変数に格納↓
    カウンタが1のとき(市の選択肢が一つのとき)変数に保持している市にselected属性を付与

    という流れです。
    選択された状態にする方法はいくつかありますが、今回はattrを使った方法にしました。
    参考になれば幸いです!!

    キャンセル

  • 2018/07/31 13:18

    いえ!とんでもないです!
    流れもご教示いただきありがとうございます!

    キャンセル

0

こんばんは!

ソースを見たのですが、都道府県のリストを選ぶと、市のリストが変化するという認識ですよね??
であれば、とりあえず取得すべきイベントは

$('.child').change


ではなく

$('.parent').change


ではないでしょうか??
もしかして僕の認識間違いでしょうか・・・!?

内容かくにんありがとうございました!

簡単に実装してみたのですが、以下のソースはどうでしょうか?
(ざざっと書いたので、わかりにくくてごめんなさい・・・)

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


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

    //市セレクトの初期化
    $.each(options,function(index,value){   
        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");
    }
    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);

  });

選択肢の増やす減らすはhideshowで実装してみました。
DOMを消してしまうと、初期化が面倒なので・・・

いかがでしょうか??
ここで動作確認できますよ!
動作確認(jsfiddle)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/30 22:52

    こんばんは
    早速ありがとうございます!

    ご指摘の通り、都道府県のリストを選ぶと市のリストが変化する形です…!
    そもそも取得する部分が違ってますね…失礼しました。こちら質問内容修正しました。

    ローカルで作成しているコードも修正して試してみます

    キャンセル

  • 2018/07/30 23:03

    やはりそうですよね!簡単に実装してみたので少々おまちください

    キャンセル

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

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

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