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

我有一个人员注册换班的表单。网页上有多个班次，而且我有一个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; 
}

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

编辑：仅仅是明确的，空的选择要素应在页面加载时，以及当元件改变

来源

2017-06-08 Yvonne Aburrow

这是我的解决方案

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。

来源

2017-06-08 11:01:27

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

来源

2017-06-08 12:38:58 Rodris

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

你说得对。添加了初始化函数和尚未由浏览器实现的CSS选择器**。 – Rodris

为您的解决方案提供了一个投票，因为它现在完成了必要的工作，但我仍然接受了我自己的答案，因为它使用与我的HTML相同的CSS类，并且因为在我的解决方案中不需要在HTML中添加onchange属性，所以我认为它还是更好。 –

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

回答

相关问题