Javascript 如果表单选择元素的值为空，则高亮显示该元素

我有一张表格，人们在上面登记轮班。页面上有多个轮班，我有一个

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>

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

编辑：为了清楚起见，加载页面时以及元素更改时，应突出显示空的select元素

这是我的解决方案

jQuery

$(document).ready(function() {
    $('.assign_user').on('change', function() {
          var user_number = $(this).val();
          var shiftid = $(this).siblings('input[name=shiftid]').val();

          /*send data to database via Ajax*/
          $.ajax({
            url: "/admin/saveshift",
            type: "GET",
            data: { 'action': 'update', 'shiftid': shiftid, 'user_number': user_number },
            success: function()
                  {
                    console.log("added a shift ");
                    /* message to user to say the record is updated */
                    $('#assigned').html('Updated');
                    $('#assigned').show();
                    setTimeout(function () {
                        $('#assigned').fadeOut();
                        return false;
                    }, 10000);
                  }
          });
          /* if null is selected, add class unassigned */
          if ($(this).val() == '') {
              $(this).addClass('unassigned');
          } else {
              $(this).removeClass('unassigned');
          }

        });
        /* when page loads, if null is selected, add class unassigned */
        $('.assign_user').each(function() {
            if ($(this).val() == '') {
                $(this).addClass('unassigned');
            }
        });
});

CSS

select.unassigned {
    background-color:lightyellow;
}

.empty {
    background-color: lightyellow;
}

我想不出只使用CSS就可以做到这一点，因此使用jQuery

CSS

select.unassigned {
    background-color:lightyellow;
}

.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。发件人：

---

与我的解决方案非常相似（除了我的解决方案在jQuery中而不是在HTML中有一个事件侦听器）。您的JavaScript也没有考虑在页面加载时将元素标记为空的需要。您是对的。添加了初始化函数和浏览器尚未实现的CSS选择器。对您的解决方案进行了投票，因为它现在执行了必要的操作，但我仍然接受了自己的答案，因为它使用与我的HTML相同的CSS类，并且因为在我的解决方案中不需要在HTML中添加onchange属性，所以我认为它更好。HTML中不需要

onchange

，因为

user1.change（function（）{userChanged（user1）；}）。也许我应该添加一条评论，但没关系。谢谢你的投票！额外注意：属性过滤器不接受空值。它不适用于您的select，因为值在
选项中，而不是元素本身。很高兴知道属性筛选器确实接受空值（select不接受空值是有意义的，因为它是被选中的选项，而不是select元素），谢谢。