jquery セレクトボックス１で、選択した内容をセレクトボックス２で反映されない。

Question

セレクトボックス1(parent)の値を変えたときに、その行の内容で、セレクトボックス２(children)の内容を変更するため、カスタムデータ属性をremoveAttrを使って消しているのですが、うまく反映されないです。

      index.blade.php
      <select class="parent" name="foo">
        <option value="" selected="selected">地方を選択</option>
        <option value="北海道・東北">北海道・東北</option>
        <option value="関東">関東</option>
        <option value="甲信越・北陸">甲信越・北陸</option>
         :
      </select>
      <select class="children" name="bar" disabled>
        <option value="" selected="selected">都道府県を選択</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>
        <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>
        <option value="鹿児島県" data-val="九州・沖縄">鹿児島県</option>
        <option value="沖縄県" data-val="九州・沖縄">沖縄県</option>
       </select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var $children = $('.children'); //都道府県の要素を変数に入れます。
    var original = $children.html(); //後のイベントで、不要なoption要素を削除するため、オリジナルをとっておく

    //地方側のselect要素が変更になるとイベントが発生
    $('.parent').change(function() {
console.log("/都道府県のselect要素が変更されたね");
      //選択された地方の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 {
        const aaaa= $children.removeAttr('disabled');
        console.log("/市内のselect要素が変更されたね", aaaa[0]);
      }

    });
})
</script>



Console.log の内容には、以下の文言が出力されています。

内のselect要素が変更されたね 
<select class=​"children" name=​"bar" tabindex=​"-98">
​<option value selected=​"selected">​都道府県を選択​</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>
​<option value=​"山形県" data-val=​"北海道・東北">​山形県​</option>
​<option value=​"福島県" data-val=​"北海道・東北">​福島県​</option>​
</select>​


セレクトボックス２(children)disabledの　disabledも外れていないです。
すみませんがお力を貸してください。。

Answer 1

IEとか無視していいならこんな感じで

Comments

[yambejp]

$(function(){
$('.parent').on('change',function(){
var v=$(this).val();
$('.children').prop('disabled',v=="");
$('.children option').hide().filter('[data-val='+v+']').show();
}).trigger('change');
});

[qmomo]

ご回答、ありがとうございます。。上記で行ったところ、以下のエラーが表示されました。
Uncaught Error: Syntax error, unrecognized expression: [data-val=]
at Function.fa.error (jquery.min.js:2)
at fa.tokenize (jquery.min.js:2)
at fa.compile (jquery.min.js:2)
at fa.select (jquery.min.js:2)
at fa (jquery.min.js:2)
at Function.fa.matches (jquery.min.js:2)
at Function.n.filter (jquery.min.js:2)
at z (jquery.min.js:2)
at n.fn.init.filter (jquery.min.js:2)
at HTMLSelectElement.<anonymous> (1:2225)

[yambejp]

ごめんなさいこうでした
filter('[data-val='+v+']')
↓↓↓
filter('[data-val="'+v+'"]')

[qmomo]

ご回答ありがとうございました。
でも、二つ目のセレクトボックスが相変わらずdisable のままでした。

[yambejp]

はて・・・、codepenで確認してみてください

https://codepen.io/yambejp/pen/rNaPEKp

IEやEdgeではきれいにでません
※だいぶ修正いれちゃいました

[qmomo]

お手数、お時間をいただき、誠にありがとうございます。
ただ、どうしても、セレクト２側（children）側のdisableが外れず、選択できない状態でした。jQuery は最新バージョンに変更しましたが変わらなかったです。→1.12.4/jquery.min.js

[yambejp]

codepenにアクセスして確認していただきました？
動作環境のos,ブラウザの種類とバージョンは？

[qmomo]

ありがとうございます。codepenosで動作を確認させていただきました。。こちらの環境か、何かが悪いかとおもいます。os はWindows 10, ブラウザは、Chrome ,79.0.３９４５．１３０です。Laravel Framework 5.８．２９で作業をしています。

Answer 2

​"children" 側にデータを追加しても、botstrap の<li>タグには反映されなかったです。
そのため、.selectpicker('refresh')を行ったところ無事に反映されました。

yambejp　様、貴重なお時間を割いていただき、ありがとうございました。