validation of multiple selects

Question

How I check if all selects have been selected?

First I check if it is different from select, user needs to mark a different option from "select".

Then I need to check that all selects are different from "select"

While not different from "select" I can not submit the form.

my jQuery:

  $('#results-answers').children('select').each(function(){
    if ($(this).val() != "Selecione"){
     $('#results-answer select').removeClass('flagError');
    }
    else{
     $('#results-answers select').addClass('flagError');
     return false;
    }
   });

This is html with one of the selects (there are 5 currently, but it can dynamically vary the amount as it comes from an ajax)

 <div class="" id="results-answers">
  <select class="form-control answers" id="1"> 
  <option>Selecione</option>
  <option value="true" data-question-code="1">Sim</option>
  <option value="false" data-question-code="1">Não</option>
  </select>
 </div>

Answer 1

Use the selector $('select option:selected[value=Selecione]') to know if there are any select with this option "Select" selected:

$( "#validar" ).click(function() {
  console.log($('select option:selected[value=Selecione]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 <p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 <p>
  <select>
     <option value='Selecione'>Selecione</option>
     <option>1</option>
     <option>2</option>
  </select>
 </p>
 
 <button id='validar'>Validar</button>

Answer 2

My suggestion is to put one value empty at each first option:

<option value="">Selecione</option>

In the function that will validate you do not need to loop each. Just check the empty ones:

function validar(){
   var resps = $('#results-answers .answers');          // seleciona os selects pela classe
   var erros = resps.find('option:selected[value=""]'); // seleciona os selects com option vazio
   resps.removeClass('flagError');                      // remove a classe de todos
   erros.parent().addClass('flagError');                // adiciona a classe nos vazios

   if(erros.length) return false;                       // se houver um vazio retorna falso
   console.log("envia o formulário!");                  // envia o formulário
}

Example:

function validar(){
   var resps = $('#results-answers .answers');          // seleciona os selects pela classe
   var erros = resps.find('option:selected[value=""]'); // seleciona os selects com option vazio
   resps.removeClass('flagError');                      // remove a classe de todos
   erros.parent().addClass('flagError');                // adiciona a classe nos vazios
   
   if(erros.length) return false;                       // se houver um vazio retorna falso
   console.log("envia o formulário!");                  // envia o formulário
}

.flagError{
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="" id="results-answers">
  <select class="form-control answers" id="1"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="1">Sim</option>
  <option value="false" data-question-code="1">Não</option>
  </select>

  <select class="form-control answers" id="2"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="2">Sim</option>
  <option value="false" data-question-code="2">Não</option>
  </select>

  <select class="form-control answers" id="3"> 
  <option value="">Selecione</option>
  <option value="true" data-question-code="3">Sim</option>
  <option value="false" data-question-code="3">Não</option>
  </select>
 </div>
 <button onclick="validar()">Validar</button>