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

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

ただいまの
回答率

88.09%

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

解決済

回答 2

投稿 編集

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

score 19

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

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

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

現在jqueryなしで作成したのですが、selectboxを2つまではわかったのですが3つ4つに増やすやり方が
わからないのと、1つ目の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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2020/11/24 09:20 編集

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

    キャンセル

  • Tsubanishi

    2020/11/24 10:20

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

    キャンセル

  • 退会済みユーザー

    2020/11/24 11:26

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

+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でoptiondisplay:none;が効かないため、spanで囲むという方法に変えました。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/11/25 00:02

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

    キャンセル

  • 2020/11/25 00:32

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

    キャンセル

  • 2020/11/25 09:12

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

    キャンセル

0

要件が満たせているかわかりませんが、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);
  });

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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