如何在選擇列表文本更改（在onchange事件觸發之前）時觸發回調函數？

Question

我有一個<select>場像下面：

<select id="my-list" class="default"> 
    <option value=0 selected disabled>Select an item</option> 
    <option value=1>First Item</option> 
    <option value=2>Second Item</option> 
    <option value=3>Third Item</option> 
</select> 

的<select>元件上的默認類的顏色設置爲紅色（表示該選項需要在這裏選擇的用戶）。

一旦用戶選擇一個項目，該類將被刪除，以便顏色變爲黑色。

現在我試圖實現的是顏色隨着選擇框中的文本更改而改變。 onchange事件僅在用戶單擊列表中的某個項目時觸發，或者按下ENTER或元素失去焦點。

但是，如果用戶點擊，直到他按下ENTER或切換到該字段的小號例如文字將變爲「第二項」和顏色保持紅色。

聆聽​​事件不起作用，因爲如果用戶點擊說X事件將觸發，但由於沒有匹配的項目，文本將不會更改。

一個可能的解決方案可能是使用​​事件，然後將文本與「選擇一個項目」進行比較，儘管它看起來不太優雅。我將如何獲得顯示的文字？ jQuery的.text()或.html()返回所有選項，而不僅僅是顯示的內容。

Answer 1

在寫完我的問題的最後一段之後，答案就出現了。

鍵入選擇框或使用向上和向下箭頭鍵將selected屬性設置爲顯示的選項。然後使用keyup事件而不是​​事件可以簡單地檢查所選選項的值，如果不是0，則類將被刪除並且顏色會發生變化。

$("#my-list").keyup(function(){ 
    if ($("#my-list option:selected").val() !== 0){ 
     $("#my-list").removeClass("default"); 
    } 
}); 

這似乎有點笨拙，所以也許有更好的辦法，但它的工作原理。