値が空であればフォーム選択要素を強調表示します

Question

私は人々がシフトにサインアップするフォームを持っています。ページには複数のシフトがあり、Ajax経由でサインアップを送信するonchangeイベントがあります。

<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でこれを行う方法を考えることはできません。私は試しました

しかし、角括弧内の属性フィルタは、私が知る限り空の値を受け入れません。

EDIT：ちょうど明確にするために、空の選択要素は、ページがロード強調表示されなければならない、などの要素が

Answer 1

を変更したときにこれが私の解決策

である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でこれを行う方法は考えられませんでした。

Answer 2

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

UPDATE：未来のソリューションは、CSSのみを使用しています。投稿者：Is there a CSS parent selector?

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