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

Question

前提・実現したいこと

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

Answer 1

少しだけ改善しました。

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

 

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

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

Comments

[suni]

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

[Spade]

ぱっとソースだけ出しちゃってごめんなさい！
簡単な流れは
県セレクトチェンジイベント
↓
市セレクト初期化
↓
選択した県に合致する市以外をhiddenに、合致した場合はカウンタを１増やしてoption要素を変数に格納↓
カウンタが１のとき（市の選択肢が一つのとき）変数に保持している市にselected属性を付与

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

[suni]

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

Answer 2

こんばんは！

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

$('.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;
  //市選択肢が１つだったとき用の保存変数
  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();
    }
  });
  
  //市の選択肢が１つしかない場合は、自動的に選択された状態に変更
  if(option_count == 1){
  	option_select.attr("selected","selected");
  }

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

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

いかがでしょうか？？
ここで動作確認できますよ！
動作確認（jsfiddle）

Comments

[suni]

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

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

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

[Spade]

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