セレクトメニューの連動について

CMSの更新画面で、すでに選択された状態での連動について教えてください。
連動そのものは問題ないのですが、更新画面で、親・子とも選択された状態で表示しますと、子の方は全て表示された状態です。
これを、[親]日本が選択された状態では、[子]は日本の地域のみ表示・選択できる状態にして、[親]を変更した場合は再度連動させたいのです。

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

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

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

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

});
});

//親
<select class="parent01 mandatory" name="input_group">
<option class="msg" value="">[国選択]</option>
<option value="1" selected>日本</option>
<option value="2">イギリス</option>
</select>

//子
<select class="children01 mandatory" name="input_name">
<option class="msg" value="">[地域選択]</option>
<option value="北海道" data-val="1" selected>北海道</option>
<option value="秋田" data-val="1">秋田</option>
<option value="青森" data-val="1">青森</option>
<option value="イングランド" data-val="2">イングランド</option>
<option value="スコットランド" data-val="2">スコットランド</option>
<option value="アイルランド" data-val="2">アイルランド</option>
</select>

いろいろ調べてみましたが、どうにもわかりません。
ご教示いただけないでしょうか？

宜しくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2019/11/05 10:15

こんにちは

＞CMSの更新画面で～～
とあるので、サイトの更新のことかと思いましたが、どうやら「閲覧者がリロードした際」という意味らしいと解釈しました。
ご質問文には説明がありませんが、jQueryを利用しているものと仮定しました。

＞子の方は全て表示された状態です
リロード時に限らず、最初の表示の初期表示でも（日本-北海道が選択状態ですが）、親（＝日本）に対して、それ以外の「子」も選択可能な状態になっていますが、そちらはそのままで残して、リロード時のみ解消したいということでしょうか？

どちらか不明なので、ひとまず、両方とも解消しても良いものと解釈しました。
対応方法として、『ロードした際に、changeイベントの時と同じ処理を実行する』ようにしておけば、ご質問の事象は解消すると思われます。

匿名関数のままだと、2度同じことを記述しなければならなくなるので、まず、changeの際の処理を名前付き関数にしておきます。
　例えば、function hoge(){ ～～
その上で、
　$('.parent01').on('change', hoge);
　hoge();
のようにしておけば良さそうです。

※ $(function(){ 内に、hoge();を記述しておくことで、ロート（リロード）時に、関数hogeが実行されることになります。

この回答へのお礼

＞『ロードした際に、changeイベントの時と同じ処理を実行する』
ありがとうございました。とても助かりました！

お礼日時：2019/11/05 10:51