我有 5 个选择选项下拉菜单。 future 它将根据需求增加。问题是，如果我选择最后一个元素，我得到的值为 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>
Javascript 函数
function selectValidation() {
var selectIsValid = true;
$('.selectmenu').each(function(){
if($(this).val()==='') {
selectIsValid = false;
} else {
selectIsValid = true;
}
});
console.log(selectIsValid);
if(selectIsValid) {
}
return false;
}
最佳答案
我认为一个更简单的解决方案是计算 .selectmenu 元素中空值的数量:
$('.selectmenu').filter(function(){return $(this).val() == ''}).length
这是一个工作片段:
function selectValidation() {
var emptyvalues = $('.selectmenu').filter(function(){return $(this).val() == ''}).length;
if (emptyvalues) {
return false;
}
return true;
}
$('#btn').click(function() {
console.log($('.selectmenu').filter(function(){return $(this).val() == ''}).length)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<br /><br />
<button id="btn">count empty</button>关于javascript - 如何检查所有选择选项值不为空？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39375679/