jQueryマルチ選択ドロップダウンで最初に選択した子にのみ追加する

Question

ユーザーが選択する最初のオプションにuserFirstChoiceクラスを追加する必要があります。 .userFirstChoice用のCSSは、最初の選択肢を強調表示するために、リスト内の最初の選択肢にいくつかの視覚的な変更を加えるだけです。

jQueryを使用してドロップダウンリストの最初の選択肢のみにaddClassを追加する方法はありますか？選択されていない最後の項目であった場合は、クラスを削除する必要もあります。

申し訳ありませんjQueryでうまくいかず、検索したほとんどの結果は次のようになりました。ページの読み込み時に最初のオプションで何か違うものを表示する最初の子。私はそれをクリックで行う必要があります。

<select id="favoriteColors" multiple> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
    <option value="yellow">Yellow</option> 
    <option value="green">Green</option> 
    <option value="black">Black</option> 
</select> 

誰かが彼らの最初の色を選択したときに、それだけでその最初のオプション（ように彼らの第二の有無）にクラス=「userFirstChoice」を追加します。

誰かが最初のイエローをクリックしたのであれば、それは次のようになります。

<select id="favoriteColors" multiple> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
    <option value="yellow" class="userFirstChoice">Yellow</option> 
    <option value="green">Green</option> 
    <option value="black">Black</option> 
</select> 

おかげ

Answer 1

をされていない場合のオプションは、クラスoption.userFirstChoice

を持っている場合は、チェックすることでこれを行うことができます$(this).find("option:selected").addClass("userFirstChoice")

このようにして、私たちはどんな種類のひどいものでも使用する必要はありません私たちのページ。それはここで通常のいくつかのちょっとの回答やコメントにより、いずれかのあなたを助けるために提供しています人々への応答を作るためにその

$('#favoriteColors').change(function() { 
 
    if ($(this).find("option.userFirstChoice").length == 0) { 
 
    $(this).find("option:selected").addClass("userFirstChoice") 
 
    } 
 
})

.userFirstChoice{color:blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="favoriteColors" multiple> 
 
    <option value="blue">Blue</option> 
 
    <option value="red">Red</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="green">Green</option> 
 
    <option value="black">Black</option> 
 
</select>