Javascript 当select list text发生更改时（onchange事件触发之前），如何触发回调函数？

我有一个

字段，如下所示：

<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>

选择一个项目
第一项
第二项
第三项

元素上的默认类将颜色设置为红色（指示用户需要在此处选择一个选项）

一旦用户选择一个项目，该类将被删除，因此颜色将变为黑色

现在我想要实现的是，选择框中的文本一旦改变，颜色就会改变。只有当用户单击列表中的项目或按ENTER键或元素失去焦点时，

onchange

事件才会激发

但是，如果用户点击S，例如，文本将变为“第二项”，颜色将保持红色，直到他按ENTER键或tabs键离开该字段

监听

keydown

事件不起作用，因为如果用户点击say X，则会触发事件，但文本不会更改，因为没有匹配项

---

一种可能的解决方案是使用

键下

事件，然后将文本与“选择一个项目”进行比较，尽管它看起来不是很优雅。我如何获得显示的文本？jQuery的

.text（）

或

.html（）

返回所有选项，而不仅仅是显示的内容。

在写下问题的最后一段后，我找到了答案

在选择框中键入或使用上下箭头键将

selected

属性设置为显示的选项。然后，可以使用

keyup

事件而不是

keydown

事件来简单地检查所选选项的值，如果该选项的值不是0，则将删除该类并更改颜色

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

这似乎有点笨拙，所以也许有更好的方法，但它是有效的