2つのセレクトボックスを連動させるjQuery

やりたいこと

2つのselect要素を連動させる。
1つめの選択肢を選ぶと、2つめの選択肢が動的に変わる。

色々なサイトを見てみたが、スマホだとうまく動かないコードがあったりした。
こちらのコードがシンプルでいい感じ。
プラグイン不要！ jQueryで複数のセレクトボックスの選択肢を連動させる

ほぼ上記サイト通りだが、optgroupを使いたかったので少しだけ変更した。
→動作デモ

HTML

1つめのセレクトボックス
selectにparent、初期値になるoptionにはmsgというクラスをつけておく。

<select class="parent" name="日付" required>
 <option value="" class="msg" disabled selected>-----日付を選択-----</option>
 <option value="1/11(水)">1/11(水)</option>
 <option value="2/5(日)">2/5(日)</option>
 <option value="3/3(金)">3/3(金)</option>
</select>

２つめのセレクトボックス
selectのクラスはchildren
data-valに1つめのvalueに対応する値を入れる。

<select class="children" name="講座名" disabled required>
 <option value="" class="msg" disabled selected>-----講座名を選択-----</option>
 <optgroup label="音楽">
  <option value="餅つき大会" data-val="1/11(水)">餅つき大会</option>
  <option value="音楽理論" data-val="1/11(水)">音楽理論</option>
  <option value="エレキギター講座" data-val="1/11(水)">エレキギター講座</option>
  <option value="エレキギター講座" data-val="2/5(日)">エレキギター講座</option>
  <option value="ドラム講座" data-val="2/5(日)">ドラム講座</option>
  <option value="エレキベース講座" data-val="3/3(金)">エレキベース講座</option>
  <option value="ボイストレーニング" data-val="3/3(金)">ボイストレーニング</option>
 </optgroup>
 <optgroup label="ウェブ">
  <option value="HTMLとCSS" data-val="1/11(水)">HTMLとCSS</option>
  <option value="JavaScript" data-val="1/11(水)">JavaScript</option>
  <option value="HTMLとCSS" data-val="2/5(日)">HTMLとCSS</option>
  <option value="PHP" data-val="2/5(日)">PHP</option>
  <option value="Qiita" data-val="3/3(金)">Qiita</option>
 </optgroup>
</select>

JavaScript(jQuery)

ほぼ参考サイト通り。変更したのは、.not()のところ。

$(function() {
  var $children = $('.children');
  var original = $children.html();

  $('.parent').change(function() {
    var val1 = $(this).val();

    $children.html(original).find('option').each(function() {
      var val2 = $(this).data('val');
      if (val1 != val2) {
        $(this).not('optgroup,.msg').remove();
      }
    });

    if ($(this).val() === '') {
      $children.attr('disabled', 'disabled');
    } else {
      $children.removeAttr('disabled');
    }

  });
});