select要素で特定のオプション以外が選択されている時クラスを削除したい

Question

select要素で特定のオプション以外が選択されている時クラスを削除したいです。

具体的構成は以下の通りです。

<select class="must">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
・
・
・
</select>

上記構成でoption要素が一番最初の「<option value=""></option>」時のみselect要素のクラス「must」を削除したいです。
optionはクリックでのリアルタイムでの切り替えもありますし、確認画面で選択したステータスがデフォルトで表示されるケースも有ります。そのためclick処理時とは限りません。

以上を踏まえご教授の程よろしくお願いいたします。

Answer 1

$(function(){
    $("select").on('click', function(){
        var val = $(this).val();
        if ('' == val) {
            $(this).removeClass('must');
        } else {
            $(this).addClass('must');
        }
    }).click();
});

Comments

[castail]

ご回答ありがとうございます。

確認したところ、以下の内容で正常に動作しませんでした。

・デフォルト表示段階で「must」が削除されている
・「<option value=""></option>」→別のステータスに変更→再度プルダウン選択時「must」がつく。
※本来この場合プルダウンを選択しただけなので「must」はつかないはず。

上記こちらの確認漏れ、またご説明が悪ければお詫びいいたします。
再度ご教授願えますでしょうか。

[退会済みユーザー]

> 「<option value=""></option>」時のみselect要素のクラス「must」を削除したい
と書いてあるので、そのように書きましたよ

あ、click じゃなくて、change ですね
2箇所、click を change に

[castail]

ご回答ありがとうございます。
ご教授いただいた内容で実現できました。
感謝申し上げます。