jquery - 打开时突出显示带有类的选择/下拉列表，或者具有除初始默认选择之外的选项

Question

好吧，这听起来 super 简单!!但它让我发疯，让我大脑衰退:)

假设我有一个基本的选择框，例如:

<select id="test">
    <option value="">--- select ---</option>
    <option value="1">One</option>
    <option value="1">Two</option>
</select>

我希望在以下状态下将“突出显示”类添加到选择中:

1. 选择处于下拉/打开状态
2. select 选择了一个有效的选项(即一个或两个)

但是如果选择在没有有效选择的情况下被关闭(即它变回“---选择---”)，则需要删除该类

听起来很简单!!

我试过这似乎是显而易见的方法:

$(document).ready(function () {

    $('#test').focus(function () {
        $(this).addClass('highlight');
    })

    $('#test').change(function () {
        if ($(this).val() != '') $(this).addClass('highlight');
        else $(this).removeClass('highlight');
    })
});

但它并没有完全 100% 工作，但它很接近，问题是如果你选择一些东西然后将它改回“---选择---”但是你不会失去下拉菜单的焦点并且重新单击它然后它不会再次添加“突出显示”类。

我已经尝试了很多添加额外事件的组合，比如点击，但我似乎无法让它完全按照我想要的方式工作。这几乎就像我需要在选择上有一个“打开”事件，但显然它不存在。

我在这里错过了一些非常明显的东西吗？因为我是一名称职的网络开发人员，已经花了几个小时来尝试做到这一点!!哈哈...但是在新西兰已经很晚了，所以如果我有的话，这就是我的借口:)

谢谢，卡尔

Answer 1

$('select').on('focus', function() {
    $(this).addClass('highlight').find('option').css('color', '#000');
}).on('blur', function() {
    $(this).removeClass('highlight');
    if (this.value.length) $(this).addClass('highlight');
}).on('change', function() {
    if (this.value.length) $(this).addClass('highlight');
    else $(this).removeClass('highlight')
});​
​

DEMO