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>

j查询:

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