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

【问题标题】：jQuery - Check If any select option is selected or all selects options unselectedjQuery - 检查是否选择了任何选择选项或未选择所有选择选项
【发布时间】：2015-11-30 22:05:40
【问题描述】：

如何检查是否选择了任何选择选项将类添加到父 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/

【问题讨论】：

标签： jquery html css select

【解决方案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");
    }
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案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.
}

【讨论】：

【解决方案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");
    }
}

【讨论】：