jQuery - 检查如果选择任何选项或未选择所有选择选项

Question

如何检查是否有选择选项添加类到父div或所有选择选项未选中是否从父级div中删除类？

HTML：

<div class="toggler_container"> 
<select name="select" id="aaa"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="bbb"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="ccc"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
</div> 

的jQuery：

$(".toggler_container select").on("change", function() { 
if ($(this).val() == "0"){ 
    $(this).closest(".toggler_container").removeClass("booked"); 
} 
else { 
    $(this).closest(".toggler_container").addClass("booked"); 
} 
}); 

现在能选择的选项，但不是工作取消选择所有选项。我只想在所有选择选项未选中时才从父div中移除类。 http://jsfiddle.net/nasxLpaL/

Answer 1

你可以检查，看看是否与“0”值来选择股权总数等于select标签总数：

JS Fiddle

$(".toggler_container select").on("change", function() { 
    var selected = $('option[value="0"]:selected'); 
    var selectTotal = $('select').length; 

    if (selected.length == selectTotal) { 
     $(this).closest(".toggler_container").removeClass("booked"); 
    } else { 
     $(this).closest(".toggler_container").addClass("booked"); 
    } 
}); 

Answer 2

其实你必须再次检查所有selects如果他们中的任何一个有一些有效的值并切换bit on/off。然后根据位值，您可以将class添加到您的parent div。

<div class="toggler_container"> 
<select name="select" id="aaa"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="bbb"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
<select name="select" id="ccc"> 
    <option value="0">---</option> 
    <option value="1">AAA</option> 
    <option value="2">BBB</option> 
</select> 
</div> 
<script> 
    $(".toggler_container select").on("change", function() { 
     var is_ok = false; 
     $(".toggler_container select").each(function(key,obj){ 
      if($(obj).val() != 0) 
       is_ok = true; 
     }); 

     if(is_ok) 
      $(this).closest(".toggler_container").addClass("booked"); 
     else 
      $(this).closest(".toggler_container").removeClass("booked"); 
    }); 
</script> 

Answer 3

如果我正确理解你正在尝试做什么，我认为你试图验证父母是否被选中。如果这是真的，你必须实现一些逻辑来验证。就像这样：

if($('#select2 :selected').val() != 0 && $('#select1 :selected').val() == 0) 
{ 
    //here you have to introduce your actions because the first select (select1) don't have any option selected. 
} 

Answer 4

你可以做这样的事情

$(".toggler_container select").on("change", function() { 
    if ($(this).val() == "0"){ 
     removeClass = true; 
     $(this).parent().find("> select").each(function(){ 
      if($(this).val() != 0) 
       removeClass = false; 
     }) 
     if(removeClass) 
      $(this).closest(".toggler_container").removeClass("booked"); 
    } 
    else 
    { 
     $(this).closest(".toggler_container").addClass("booked"); 
    } 
}