堆栈内存溢出
  简体   繁体   English

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

[英]How to check all select option value is not an empty?

 原文  2016-09-07 17:06:26  5   5    javascript/ jquery/ html/ css

问题描述

I'm having 5 select option drop down menu. 我有5选择选项下拉菜单。 Future it will get increase based on the requirement. 未来它将根据需求增加。 The problem is if i select last element i'm getting the value is true. 问题是，如果我选择了最后一个元素，我就得到了正确的值。 Other elements not filled, it is empty only. 其他元素未填充，仅为空。 It should through false only, if anyone element value is null. 如果任何元素的值为null，则应仅通过false。

This is my code 这是我的代码 

<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 Javascript功能 

function selectValidation() {
            var selectIsValid = true;
            $('.selectmenu').each(function(){
                if($(this).val()==='') {
                    selectIsValid = false;
                } else {
                    selectIsValid = true;
                }
            });
            console.log(selectIsValid);
            if(selectIsValid) {
            }
            return false;
        }

5 个解决方案

解决方案1
 3 已采纳  2016-09-07 17:26:33

I think that a much simpler solution is to count the number of empty values you have within the .selectmenu elements: 我认为一个更简单的解决方案是计算.selectmenu元素内的空值数量： 

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

Here is a working snippet: 这是一个工作片段： 

 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>

解决方案2
 2  2016-09-07 17:12:34

The below would work, just dont set selectIsValid = true; 下面的工作，只是不设置selectIsValid = true; at all in your loop. 完全在您的循环中。 Set it to true to begin with, then in the loop only set it to false if you find an empty value. 首先将其设置为true，然后在循环中仅在找到空值时将其设置为false。 After the loop, return selectIsValid , it'll be true unless one of the tests failed: 循环之后，返回selectIsValid ，除非测试之一失败，否则它将为true： 

 function selectValidation() { var selectIsValid = true; $('.selectmenu').each(function() { if ($(this).val() === '') { selectIsValid = false; return; // skip remaining checks } }); return selectIsValid; } $('#test').click(function() { console.log(selectValidation()); }); 
 <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> <button id="test">test <button>

解决方案3
 0  2016-09-07 17:10:44

Basically, once you find one that is false, you don't care about the others. 基本上，一旦发现一个错误，就不会在乎其他。 What you were doing overwrites any falses with the subsequent checks. 您正在执行的操作会覆盖后续检查中的所有错误。 You want something like this: 您想要这样的东西： 

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

    return true;
}

解决方案4
 0  2016-09-07 17:11:42

The problem is that in your each function, you set selectIsValid to true if that particular select is valid. 问题是在每个函数中，如果该特定选择有效，则将selectIsValid设置为true。 This overwrites the value for previous selects. 这将覆盖先前选择的值。 You need to remove the else clause. 您需要删除else子句。

The code could be a bit clearer if selectIsValid was named allSelectsAreValid also. 如果selectIsValid也被命名为allSelectsAreValid则代码可能会更清晰allSelectsAreValid 。

解决方案5
 0  2019-02-07 00:52:32

The problem, if it returns false, it resets the form. 问题是，如果返回false，它将重置表格。 

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

return true;

} }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何检查选择选项中的所有值是否与javascript相同？ - How to check if all value in select option are the same with javascript? 如何检查是否在 sumoselect 中选中了全选选项 - How to check if select all option is checked in sumoselect 检查选项 select 在 django 中是否为空 - Check if option select is empty in django 如何通过 select 选项更改所有输入值 - How to change all input value by select an option 选择下拉列表中的空值选项 - Empty value option in select dropdown 选项选择值以全选 - Option Select value to select all 如何使用jquery检查所有选择框是否都选择了选项？ - How to check if all select boxes has selected option using jquery? 如何在没有jQuery的情况下检查select字段是否具有某个选项值 - How to check if a select field has a certain option value without jQuery 检查所有字段的空值 - Check empty value for all fields jQuery 得到 select 选项值为空 - jQuery get select option value empty
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM