javascript - 如果值为空，则突出显示表单选择元素

Question

我有一个表格，人们可以在其中注册轮类。页面上有多个类次，我有一个 onchange通过 Ajax 发送注册的事件。

<select name="user" class="assign_user" id="user1">
   <option value="user1234" selected="selected">Joe Bloggs</option>
   <option value="">No-one</option>
   <option value="user1235">Jane Mahon</option>
   <option value="user1236">Ahmed Kitab</option>
   <option value="user1237">Dave Smew</option>
</select>

如果<option value="">No-one</option>已选中，我想突出显示 select黄色元素。

我想不出只用 CSS 来做到这一点的方法。我试过了

select[value=''] {  
   background-color:lightyellow; 
}

但据我所知，方括号中的属性过滤器不接受空值。

编辑:为了清楚起见，空选择元素应该在页面加载时以及元素更改时突出显示

Answer 1

CSS

.empty {
    background-color: lightyellow;
}

Javascript

function userChanged(select) {
    select = $(select);
    if (select.val() === "") select.addClass("empty");
    else select.removeClass("empty");
}

// UPDATED: Initialization
$(function() {
    var user1 = $("#user1");
    user1.change(function() { userChanged(user1); });

    // Highlights select when page loads.
    userChanged(user1);
});

更新: future 的解决方案仅使用 CSS。来自:Is there a CSS parent selector?

select:has(option:checked[value='']) {
    background-color: lightyellow;
}