如何检查所有选择选项值是不是空？

时间：2016-09-07 17:06:26

标签： javascript jquery html css

我有5个选择选项下拉菜单。未来它将根据需求增加。问题是如果我选择最后一个元素我得到的值是真的。其他元素未填充，仅为空。如果任何元素值为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;
        }

5 个答案:

答案 0 :(得分：3)

我认为更简单的解决方案是计算.selectmenu元素中的空值数量：

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

这是一个工作片段：

＆＃13;
＆＃13; 
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)
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

以下内容可行，只是在循环中根本不设置selectIsValid = true;。将其设置为true以开始，然后在循环中仅在找到空值时将其设置为false。在循环之后，返回selectIsValid，除非其中一个测试失败，否则它将成立：

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>

答案 2 :(得分：0)

基本上，一旦你发现一个是虚假的，你就不会关心其他人。你正在做的事情用随后的检查覆盖任何谬误。你想要这样的东西：

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

    return true;
}

答案 3 :(得分：0)

问题是，在每个函数中，如果特定选择有效，则将selectIsValid设置为true。这会覆盖先前选择的值。您需要删除else子句。

如果selectIsValid也被allSelectsAreValid命名，代码可能会更清晰。

答案 4 :(得分：0)

问题，如果返回false，它将重置表格。

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

return true;

}

相关问题
最新问题