Checking multiple <select> of same "name" if it is empty with Jquery

Asked

Viewed 586 times

0

I tried several ways but was unsuccessful in creating a window.Alert(); with Return false; if no select field of name="producto_qtd[]" is selected or if it does not exist, but unsuccessfully, I looked around and no response adapted to what I need.

Example:

<select name="produto_qtd[]" class="form-control">
<option value="">Produto X - Selecione quantidade</option>
<option value="10">10 itens</option>
<option value="20">20 itens</option>
<option value="50">50 itens</option>
</select>


<select name="produto_qtd[]" class="form-control">
<option value="">Produto Y - Selecione quantidade</option>
<option value="10">10 itens</option>
<option value="20">20 itens</option>
<option value="50">50 itens</option>
</select>

Or if select does not exist, also check and return a window.Alert(); and Return false; stating "No quantity selected", only.

There is a case that the select related to the product is lost due to the declared value of the product being higher than the contracted plan, and other cases the select exists but no "value" with value has been selected.

javascript html jquery

  • But is it a multiple select or multiple selects with the same name? What exactly are you trying to do?

  • It is more of a select, as it was necessary so that the file requested by . ajax() treats select as an array due to a peculiar project need.

  • Managed to solve?

2 answers

0

Make a filter on us select that has some value. 

if ($("select[name='produto_qtd[]']").toArray().filter(function (e) { return $(e).val(); }).length > 0)
    alert('algum selecionado');
else
    alert('nenhum selecionado');

0

You can use a map to bring the selected values.

$(document).ready(function() {
  var selecionados;
  $('[name="produto_qtd[]"]').on('change', function() {
     selecionados = $('[name="produto_qtd[]"] :selected')
                       .map(function(){
                            if($(this).val() != '')
                            return $(this).text();
                        }).get();
    console.log(selecionados);
  });
  
  $("#validar").on('click', function(){
      if(selecionados == null)
        alert("Nenhum produto selecionado");
      else{
        alert("Os seguintes produtos foram selecionados: \r\n" + selecionados.toString());
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="produto_qtd[]" class="form-control">
  <option value="">Produto X - Selecione quantidade</option>
  <option value="10">10 itens</option>
  <option value="20">20 itens</option>
  <option value="50">50 itens</option>
</select>


<select name="produto_qtd[]" class="form-control">
  <option value="">Produto Y - Selecione quantidade</option>
  <option value="10">10 itens</option>
  <option value="20">20 itens</option>
  <option value="50">50 itens</option>
</select>
<button id="validar">Verificar</button>

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.