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

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="">无</option>，我想将 select 元素标记为黄色。

我无法仅使用 CSS 实现此操作。我尝试过：

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

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

编辑: 仅为了明确起见，当页面加载时，空的选择元素应该被突出显示，以及当元素发生更改时。

- Yvonne Aburrow

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

- Rodris

---

与我的解决方案非常相似（除了我的jQuery中有一个事件监听器，而不是在HTML中）。您的JavaScript也没有考虑到在页面加载时需要将元素标记为空的需求。 - Yvonne Aburrow

你是对的。已添加初始化函数和一个CSS选择器，但浏览器尚未实现。 - Rodris

我投票支持你的解决方案，因为它现在做了必要的事情，但我仍然接受了自己的答案，因为它使用了与我的 HTML 相同的 CSS 类，并且在我的解决方案中没有必要在 HTML 中添加 onchange 属性，所以我认为它仍然更好。 - Yvonne Aburrow

HTML中不需要使用onchange，因为有user1.change(function() { userChanged(user1); });。也许我应该添加注释，但没关系。感谢您的投票！额外说明：属性过滤器接受空值。它在您的选择器中无法正常工作，因为值在option子元素中，而不是元素本身。 - Rodris

很高兴知道属性过滤器可以接受空值（而且选择不接受是有意义的，因为它是被选中的选项而不是选择元素），谢谢。 - Yvonne Aburrow

我将此回答标记为被接受的，因为您更新了解决方案。 - Yvonne Aburrow

Answer 2

这是我的解决方案

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

我想不到仅使用 CSS 的方式来实现这一点，因此需要使用 jQuery。

- Yvonne Aburrow