3

好的，这听起来超级简单！！但它让我发疯，让我大脑褪色:)

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

<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% 有效，但它已经接近了，问题是如果你选择了一些东西，然后将它改回“--- select ---”但是你不会失去下拉的焦点并重新点击然后它不会再次添加“突出显示”类。

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

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

谢谢，卡尔

4

1 回答 1

2 
$('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')
});​
​

演示

于 2012-05-15T10:57:29.483 回答