ページが表示された時点でセレクトボックスに何らかの要素が選択されていればクラス付与

Question

###前提・実現したいこと
ページが表示された時点でセレクトボックスに何らかの要素が選択されていればクラス付与、空ならクラス除去をしたい。

###発生している問題・エラーメッセージ
下記のコードですと、クリックして選択した時点で発火しますが、ページが表示された時点で発火させたい。

###該当のソースコード
これだと動きますが、selectedですでに選択済みのoption要素に対して、ページ表示と同時に発火してくれません。

<select data-target="#hoge">
  <option value="" selected="selected">1</option>
  <option value="">2</option>
  <option value="">3</option>
</select>

$(function () {
    $('select[data-target^="#hoge"]').on("change", function () {
		var flag = ($(this).select) ? 'addClass' : 'removeClass';
		$($(this).attr('data-target'))[flag]('selected');
	});
});

###試したこと
これだと動かないです…

$(function () {
    $('select[data-target^="#hoge"]').on("load", function () {
		var flag = ($(this).select) ? 'addClass' : 'removeClass';
		$($(this).attr('data-target'))[flag]('selected');
	});
});

Answer 1

これではだめすか？

$(function () {
    $('select[data-target^="#hoge"]').on("change", function () {
        var flag = ($(this).select) ? 'addClass' : 'removeClass';
        $($(this).attr('data-target'))[flag]('selected');
    });
    // 追加↓
    $('select[data-target^="#hoge"]').change();
});

Comments

[hibikikudo]

ありがとうございます。こちらで試してみます！

[hibikikudo]

シンプルにやりたいことが実現できましたので、こちらをBAとさせていただきます。ありがとうございました。

Answer 2

※value値を設定し、valueがないものは選択されていないものとします。

<select data-target="#hoge">
  <option value="">未選択</option>
  <option value="1" selected="selected">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

画面読み込み時「のみ」実行させるのであれば以下になるかと思います。

$(function () {
    var $select = $('select[data-target^="#hoge"]');
    var flag = $select.val().length > 0;
    $($select.attr('data-target')).toggleClass('selected', flag);
});

ちなみに変数名に$selectというように「$」を名前を付けているのはjqueryの要素であることを示す慣習です。

Comments

[hibikikudo]

私の質問方法が悪く失礼いたしました。今回のケース画面読み込み時「のみ」ではなかったので…。この方法は未選択やdisabled時に応用できそうです。どうもありがとうございました。