javascript - 检查所有下拉列表是否为空 jQuery

Question

我有三个select元素:

            <select id="first">
                <option></option>
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
            </select>
            <select id="second">
                <option></option>
                <option value="d">d</option>
                <option value="e">e</option>
                <option value="f">f</option>
            </select>
            <select id="three">
                <option></option>
                <option value="g">g</option>
                <option value="h">h</option>
                <option value="i"></option>
            </select>

所有三个都必须为空(第一个选项)，或者有一个值。

所以<option></option> <option></option> <option></option>没问题

但不是<option value="a">a</option> <option></option> <option></option>有点东西。

我已经尝试过这个，但它不起作用，因为它不允许所有三个都为空并在第一种情况下退出

if($("#first").val() === "" || $("#second").val() === "" || $("#third").val() === ""){
    return false;
}

有什么帮助吗？我想做得尽可能短/好看

Answer 1

你可以

var $selects = $('#first, #second, #three'),
    $selected = $selects.filter(function () {
        return this.value != ''
    });
if ($selected.length != 0 && $selected.length != $selects.length) {
    return false;
}

演示:Fiddle