セレクトボックスの値を変更すると、別のセレクトボックスの項目が自動で切り替わるjQuery

Question

wordpressの問い合わせホームにて、セレクトボックスの値を変更すると、別のセレクトボックスの項目が自動で切り替わるjQueryプラグインを探しています。
下記ページのDependent Selectsというプラグインが、セレクトボックスの値を変更すると別のセレクトボックスが現れ、項目が自動で切り替えるものがいくつも作れると思ったのですが、　CDNに対応しておらず、サーバーからファイルを引っ張ってくる必要があります。　できれば、あまりサーバー内にファイルを置きたくないので、CDNを使用して引っ張ってこれるjqueryプラグイン をどなたか知らないでしょうか？

こちらがやりたい事ができるプラグイン です。
https://fit-jp.com/selectbox-jq/
やりたいこととして
1 バス利用の有り、無しをselectboxで選択→有りの場合はバスルートとselectboxがあらわれる。無しの場合はバスルートのselectboxはあらわれない

2バス利用有りを選択した場合に次のバスルートを選択→１ルートの場合は1ルートのバス停の書いてあるselectboxがあらわれる。2ルートの場合は2ルートのバス停の書いてあるselectboxがあらわれる
↑↑↑
2の部分は下記コードで作成してみたのですが、初めからバスルートと停留所２つのバスルートのselectboxがでたままになっています。

現在jqueryなしで作成したのですが、selectboxを２つまではわかったのですが3つ４つに増やすやり方が
わからないのと、１つ目のselectboxを選択したら次のセレクトboxがでるみたいにしたいのですが
そのやり方がわからずプラグインを使用しようと思っておりました
現在のコードは下記です

<select class="form-control" name="バスルート(バス希望の方のみ)">
  <option value="" selected="selected">選択してください</option>
  <option value="①ルート">①ルート</option>
  <option value="②ルート">②ルート</option>
</select>
 
<select class="children" name="bar" disabled="">
  <option value="" selected="selected">選択してください</option>
  <option value="3丁目交差点先" data-val="①ルート">3丁目交差点先</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>

<script>
var $children = $('.children'); //停留所の要素を変数に入れます。
var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく
 
//地方側のselect要素が変更になるとイベントが発生
$('.form-control').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');
  }
 
});
</script>

Comments

[yambejp]

jQuery本体を除きライブラリを利用しないで自前で作るという選択肢はありますか？
またどういうデータからどういうセレクトボックをどう連携したいのかわかりません

[nobinomio]

自前でできるところまで作成しております。
ご確認お願いします

Answer 1

多少htmlもいじりますが、以下のようなものでどうでしょう。

<select class="form-control" name="バスルート(バス希望の方のみ)" data-child="#1">
  <option value="" selected="selected">選択してください</option>
  <option value="①ルート">①ルート</option>
  <option value="②ルート">②ルート</option>
</select>

<select class="form-control children" id="1" name="bar" data-child="#2">
  <option value="" selected="selected">選択してください</option>
  <option value="3丁目交差点先" data-val="①ルート">3丁目交差点先</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>

<select class="form-control children" id="2" name="foo">
  <option value="" selected="selected">選択してください</option>
  <option value="a" data-val="3丁目交差点先">a</option>
  <option value="b" data-val="3丁目交差点先">b</option>
  <option value="c" data-val="ポルシェ前">c</option>
  <option value="d" data-val="ポルシェ前">d</option>
  <option value="e" data-val="南郵便局前">e</option>
  <option value="f" data-val="サミット前">f</option>
</select>

.children { display: none; }

$('.form-control').on('change', function(){
	let $this = $(this),
		child = $this.data('child'),
		val = $this.val();
	
	if (val) {
		let op_cnt = 0;
		$(child).find('option').each(function(){
			let op = $(this);
			if ( ! op.data('val') || op.data('val') == val) {
				if (op.closest('span.hide').length) {
					op.unwrap();
				}
				
				if (op.data('val') == val) {
					op_cnt ++;
				}
			} else {
				if ( ! op.closest('span.hide').length) {
					op.wrap('<span class="hide">');
				}
			}
		});
		
		if (op_cnt) {
			$(child).show();
		} else {
			$(child).val('').hide().change();
		}
	} else {
		$(child).val('').hide().change();
	}
});

追記:
iOSでoptionのdisplay:none;が効かないため、spanで囲むという方法に変えました。

Comments

[nobinomio]

できたのですが、なぜかスマホで操作するとselectbox1で①ルートを選択するとselectbox２では全ての項目が見れるようになってしまいました。selectbox3も同様です＞pcだとselectbox1で①ルートを選択するとselectbox2では１で指定したルート内の停留所しか出てこないです
こんな事有りますでしょうか？携帯はiphone seを使用、PCはmacbook air11in
chiのものを使用しています

[cerfweb]

私も知りませんでしたが、どうやらiOSではoptionにdisplay:none;が効かないようです。調べたところspanでwrapすると隠せることがわかりましたので、そのようにコードを変更しました。

[nobinomio]

とても勉強になりました。
iOSで変わるとは知りませんでした
有難う御座いました

Answer 2

要件が満たせているかわかりませんが、optionはshow/hideで制御すれば簡単だと思います。

  $('.form-control').change(function() {
    var val1 = $(this).val();
    $('.children').prop('disabled', !val1);
    
    var options = $('.children > option');
    options.hide()
      .filter('[value=""],[data-val="' + val1 + '"]').show()
      .filter(':first').prop('selected', true);
  });