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>。

config_test.yml

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

jQuery - 检查是否选择了任何选择选项或未选择所有选择选项

4 个答案: