Javascript 如何检查所有选择选项值是否为空？

我有5个选择选项下拉菜单。未来将根据需求增加。问题是，如果我选择最后一个元素，我得到的值为true。其他元素未填充，仅为空。如果任何元素值为null，则仅应通过false

这是我的密码

<form name="selectForm" action="" onSubmit="return selectValidation();" method="POST">
            <div>
                <select class="selectmenu">
                    <option value="">Select the value</option> 
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div>
                <select class="selectmenu">
                    <option value="">Select the value</option> 
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div>
                <select class="selectmenu">
                    <option value="">Select the value</option> 
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div>
                <select class="selectmenu">
                    <option value="">Select the value</option> 
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div>
                <select class="selectmenu">
                    <option value="">Select the value</option> 
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <div>
                <button type="submit" class="btn">
                    <i class="fa fa-btn fa-user"></i> Submit Answers
                </button>
            </div>
        </form> 

---

基本上，一旦你发现一个是错误的，你就不关心其他的。您所做的操作会在后续检查中覆盖任何错误。你想要这样的东西：

function selectValidation() {
    $('.selectmenu').each(function () {
        if ($(this).val() === '') {
            // If you find any, bail immediately.
            return false;
        }
    });

    return true;
}

---

问题在于，在每个函数中，如果特定的选择有效，则将

selectIsValid

设置为true。这将覆盖以前选择的值。您需要删除else子句

---

如果

selectIsValid

也被命名为

allSelectsAreValid

的话，代码可能会更清晰一些。

下面的代码可以工作，只是不要设置

selectIsValid=true在你的循环中。首先将其设置为true，然后在循环中仅当发现空值时才将其设置为false。循环结束后，返回
选择IsValid
，除非其中一个测试失败，否则它将为真：


函数selectValidation（）{
var selectIsValid=true；
$（'.selectmenu'）。每个（函数（）{
if（$（this.val（）=''）{
选择IsValid=false；
return；//跳过剩余的检查
}
});
返回selectIsValid；
}
$（“#测试”）。单击（函数（）{
log（selectValidation（））；
});

选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交答案
测试
我认为一个简单得多的解决方案是计算
中的空值数量。选择Menu
元素：

$('.selectmenu').filter(function(){return $(this).val() == ''}).length

以下是一个工作片段：


函数selectValidation（）{
var emptyvalues=$（'.selectmenu'）.filter（函数（）{return$（this.val（）='''}）.length；
如果（空值）{
返回false；
}
返回true；
}
$（'#btn'）。单击（函数（）{
console.log（$（'.selectmenu'）.filter（函数（）{return$（this.val（）='''}）.length）
});

选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
选择值
1.
2.
3.
4.
5.
6.
7.
8.
9
10
提交答案



count empty
问题，如果返回false，则重置表单

function selectValidation() {
$('.selectmenu').each(function () {
    if ($(this).val() === '') {
       alert('please complete the form');
        // If you find any, bail immediately.
        return false;
    }
});

return true;

}
当您找到第一个空值时，您的函数应该停止对选定元素的迭代。
function selectValidation() {
$('.selectmenu').each(function () {
    if ($(this).val() === '') {
       alert('please complete the form');
        // If you find any, bail immediately.
        return false;
    }
});

return true;