Highlight a form select element if its value is empty

Question

I have a form where people sign up for a shift. There are multiple shifts on the page, and I have an onchange event that sends the sign-up via 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>

If <option value="">No-one</option> is selected, I want to highlight the select element in yellow.

I cannot think of a way to do this with just CSS. I tried

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

but the attribute filter in the square brackets doesn't accept empty values, as far as I know.

EDIT: just to be clear, empty select elements should be highlighted when the page loads, as well as when the element changes

Rodris · Accepted Answer · 2017-06-08T17:13:37.820

4

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: Future solution uses CSS only. From: Is there a CSS parent selector?

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

edited Jun 08 '17 at 17:13

answered Jun 08 '17 at 12:38

Rodris

2,139
1
14
25

pretty similar to my solution (except mine has an event listener in the jQuery instead of in the HTML). Your JavaScript doesn't take into account the need to flag the elements as empty when the page loads, either. – Yvonne Aburrow Jun 08 '17 at 14:29
1

You are right. Added the initialization function and a CSS selector **not yet** implemented by browsers. – Rodris Jun 08 '17 at 17:16
gave your solution a vote because it now does the necessary but I have still accepted my own answer because it uses the same CSS classes as my HTML, and because there is no need to add an onchange attribute in the HTML in my solution, so I think it's still better. – Yvonne Aburrow Jun 12 '17 at 14:01
1

The `onchange` is not needed in the HTML because of `user1.change(function() { userChanged(user1); });`. Maybe I should have added a comment, but it is ok. Thank you for the vote! Extra note: the attribute filter does accept empty values. It didn't work for your select because the value is in the `option` child, not the element itself. – Rodris Jun 12 '17 at 19:43
good to know that the attribute filter does accept empty values (and makes sense that select wouldn't because it is the option that is selected and not the select element), thanks. – Yvonne Aburrow Jun 13 '17 at 09:11
I made this the accepted answer because of your update to the solution – Yvonne Aburrow Oct 24 '19 at 13:05

score 0 · Answer 2 · answered Jun 08 '17 at 11:01

This is my solution

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

I couldn't think of a way to do this with just CSS, hence the jQuery.

Highlight a form select element if its value is empty

2 Answers2