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 。来自：Is there a CSS parent selector?

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

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。

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

2 个答案: