セレクトボックス1(parent)の値を変えたときに、その行の内容で、セレクトボックス2(children)の内容を変更するため、カスタムデータ属性をremoveAttrを使って消しているのですが、うまく反映されないです。
Laravel
1 index.blade.php 2 <select class="parent" name="foo"> 3 <option value="" selected="selected">地方を選択</option> 4 <option value="北海道・東北">北海道・東北</option> 5 <option value="関東">関東</option> 6 <option value="甲信越・北陸">甲信越・北陸</option> 7 : 8 </select> 9 <select class="children" name="bar" disabled> 10 <option value="" selected="selected">都道府県を選択</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 <option value="秋田県" data-val="北海道・東北">秋田県</option> 16 <option value="山形県" data-val="北海道・東北">山形県</option> 17 <option value="福島県" data-val="北海道・東北">福島県</option> 18 <option value="茨城県" data-val="関東">茨城県</option> 19 : 20 <option value="大分県" data-val="九州・沖縄">大分県</option> 21 <option value="宮崎県" data-val="九州・沖縄">宮崎県</option> 22 <option value="鹿児島県" data-val="九州・沖縄">鹿児島県</option> 23 <option value="沖縄県" data-val="九州・沖縄">沖縄県</option> 24 </select>
jQuery
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 2<script type="text/javascript"> 3$(function() { 4 var $children = $('.children'); //都道府県の要素を変数に入れます。 5 var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく 6 7 //地方側のselect要素が変更になるとイベントが発生 8 $('.parent').change(function() { 9console.log("/都道府県のselect要素が変更されたね"); 10 //選択された地方のvalueを取得し変数に入れる 11 var val1 = $(this).val(); 12 //削除された要素をもとに戻すため.html(original)を入れておく 13 $children.html(original).find('option').each(function() { 14 var val2 = $(this).data('val'); //data-valの値を取得 15 16 //valueと異なるdata-valを持つ要素を削除 17 if (val1 != val2) { 18 $(this).not(':first-child').remove(); 19 } 20 21 }); 22 23 //地方側のselect要素が未選択の場合、都道府県をdisabledにする 24 if ($(this).val() == "") { 25 $children.attr('disabled', 'disabled'); 26 } else { 27 const aaaa= $children.removeAttr('disabled'); 28 console.log("/市内のselect要素が変更されたね", aaaa[0]); 29 } 30 31 }); 32}) 33</script> 34 35 36 37Console.log の内容には、以下の文言が出力されています。 38 39内のselect要素が変更されたね 40<select class="children" name="bar" tabindex="-98"> 41<option value selected="selected">都道府県を選択</option> 42<option value="北海道" data-val="北海道・東北">北海道</option> 43<option value="青森県" data-val="北海道・東北">青森県</option> 44<option value="岩手県" data-val="北海道・東北">岩手県</option> 45<option value="宮城県" data-val="北海道・東北">宮城県</option> 46<option value="秋田県" data-val="北海道・東北">秋田県</option> 47<option value="山形県" data-val="北海道・東北">山形県</option> 48<option value="福島県" data-val="北海道・東北">福島県</option> 49</select> 50 51 52セレクトボックス2(children)disabledの disabledも外れていないです。 53すみませんがお力を貸してください。。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/23 10:30
2020/01/23 10:50
2020/01/24 00:36
2020/01/24 01:08
2020/01/24 02:01 編集
2020/01/24 02:18
2020/01/24 02:21
2020/01/24 02:34