セレクトボックスを連動させたい

Question

前提・実現したいこと

セレクトボックスを連動させたい。

発生している問題・エラーメッセージ

２つのセレクトボックス同士を連動させたく、１つめのセレクトボックスを選択した場合に２つめを絞り込む動きは実現できたのですが、ページによっては１つめのセレクトボックスがデフォルトで選択された状態になっている場合があり、その場合に該当のエリアで絞られている状態にするにはどうすればいいのか分かりません。

該当のソースコード

<select name="sel_pref" class="sel_pref">
    <option value='' selected>（都道府県選択）</option>
    <option value='0001'>北海道</option>
    <option value='0002'>青森県</option>
</select>
<select name="sel_area" class="sel_area">
    <option value='' selected>（エリア選択）</option>
    <option value='' data-val='0001'>北海道全て</option>
    <option value='' data-val='0001'>札幌</option>
    <option value='' data-val='0002'>青森</option>
</select>

	var $sel_area = $('.sel_area');
	var original = $sel_area.html();

	$('.sel_pref').change(function() {
		var val1 = $(this).val();
		$sel_area.html(original).find('option').each(function() {
			var val2 = $(this).data('val');
			if (val1 != val2) {
			     $(this).not(':first-child').remove();
			}
		});
		if ($(this).val() == "") {
			 $sel_area.attr('disabled', 'disabled');
		} else {
			$sel_area.removeAttr('disabled');
		}
	});

jQueryが初心者で説明下手で申し訳ありません。お知恵を拝借できると幸いです。

Answer 1

ページによっては１つめのセレクトボックスがデフォルトで選択された状態になっている場合があり、その場合に該当のエリアで絞られている状態にするにはどうすればいいのか分かりません。

まず、質問者様の現在のコードについて見てみます。

 $('.sel_pref').change(function() {
       //処理
 });

このように.changeのイベントで書かれているため、都道府県選択のセレクトボックスに何か変更があった場合のみにしか発火しません。
そこで以下のイベントを用います。

window.onload = function(){
　// ページ読み込み時に実行したい処理
}

ここで、セレクトボックスがデフォルトで選択された状態の時の処理を書けばよいかと思います。

Comments

[saaya0504]

ご回答いただきありがとうございます！試してみます。
大変助かりました。ありがとうございました！