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

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);
});

更新：未来的解决方案仅使用CSS。来自：有 CSS 父选择器吗？

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