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がでるみたいにしたいのですが
そのやり方がわからずプラグインを使用しようと思っておりました
現在のコードは下記です
html
1<select class="form-control" name="バスルート(バス希望の方のみ)"> 2 <option value="" selected="selected">選択してください</option> 3 <option value="①ルート">①ルート</option> 4 <option value="②ルート">②ルート</option> 5</select> 6 7<select class="children" name="bar" disabled=""> 8 <option value="" selected="selected">選択してください</option> 9 <option value="3丁目交差点先" data-val="①ルート">3丁目交差点先</option> 10 <option value="ポルシェ前" data-val="①ルート">ポルシェ前</option> 11 <option value="南郵便局前" data-val="①ルート">南郵便局前</option> 12 <option value="サミット前" data-val="②ルート">サミット前</option> 13 <option value="交差点手前" data-val="②ルート">交差点手前</option> 14 <option value="神社前" data-val="②ルート">神社前</option> 15</select>
javascript
1<script> 2var $children = $('.children'); //停留所の要素を変数に入れます。 3var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく 4 5//地方側のselect要素が変更になるとイベントが発生 6$('.form-control').change(function() { 7 8 //選択された方面のvalueを取得し変数に入れる 9 var val1 = $(this).val(); 10 11 //削除された要素をもとに戻すため.html(original)を入れておく 12 $children.html(original).find('option').each(function() { 13 var val2 = $(this).data('val'); //data-valの値を取得 14 15 //valueと異なるdata-valを持つ要素を削除 16 if (val1 != val2) { 17 $(this).not(':first-child').remove(); 18 } 19 20 }); 21 22 //方面側のselect要素が未選択の場合、停留所をdisabledにする 23 if ($(this).val() == "") { 24 $children.attr('disabled', 'disabled'); 25 } else { 26 $children.removeAttr('disabled'); 27 } 28 29}); 30</script>
回答2件
あなたの回答
tips
プレビュー