如何在选择列表文本更改（在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"); 
    } 
}); 

这似乎有点笨拙，所以也许有更好的办法，但它的工作原理。