Get value from a select

Navigation
0

I have the following form:

Iwouldliketogetthevalueofselectasitaddsmorefields.I'mtryingtogetitthatway,butitonlyreturnsmethePax,thatis,alwaysthefirstvalue,evenwhenIselecttheAdultoranotherselectvalue.

<tableborder="0" width="100%">
      <tr>
        <td  style="padding: 5px">
          <select name="TipoDocumento[]" class="form-control tipoPassageiro">
            <option>Pax</option>
            <option value="Adulto">Adulto</option>
            <option value="Adolescente entre 12 e 18 anos">Adolescente entre 12 e 18 anos</option>
            <option value="Criança entre 6 e 12 anos">Criança entre 6 e 12 anos</option>
            <option value="Criança de colo de até 6 anos">Criança de colo de até 6 anos</option>
          </select>
        </td>
      <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
      <td  style="padding: 5px">
        <select id="TipoDocumento" name="TipoDocumento[]" class="form-control">
          <option>Tipo de documento</option>
          <option value="Carteira de Identidade">Carteira de Identidade</option>
          <option value="Carteira Nacional de Habilitação">Carteira Nacional de Habilitação</option>
          <option value="Carteira de Trabalho">Carteira de Trabalho</option>
          <option value="Certidão de Nascimento">Certidão de Nascimento</option>
          <option value="Passaporte">Passaporte</option>
          <option value="Cédula de Identidade Estrangeira">Cédula de Identidade Estrangeira</option>
          <option value="Outros">Outros</option>
        </select>
      </td>
      <td  style="padding: 5px">
         <input type="text" name="Documento[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
      </td>
      <td  style="padding: 5px">
         <input type="text" name="OrgaoEmissor[]" class="form-control" placeholder="Órgão Emissor" value="">
      </td>
    </tr>
  </table>

JQuery 

$(".adicionarCampo").click(function () {
    var tipoPassageiro = $(".tipoPassageiro option:selected").val();
    alert(tipoPassageiro);
});
    
asked by anonymous 25.11.2018 / 19:10

2 answers

2

If you have more than one element with the same class .tipoPassageiro and use the $(".tipoPassageiro option:selected").val() selector without specifying the position, you will always get the value of the first element with that class.

If you want to get the value of the last element of the class, add :last : 

$(".tipoPassageiro:last").val();

You do not need to use option:selected . The value of select is already option selected.

    
25.11.2018 / 19:26
1

All jQuery queries return a list of results, even if you are looking for only one DOM element. When you use val() , jQuery assumes that you searched for just one element, and returns you the value of the first item in the list.

As many elements have the class tipoPassageiro , jQuery will only return the value of the first element found with this class. If you want to differentiate them, give a different id for each of the elements you create, and query by id.

If there is no need to differentiate them, you can iterate over the list of results with each: 

$(".tipoPassageiro option:selected").each((i, e) => {
    alert(e.value);
});

Or generate a list with the results using map: 

var listaResultados = $.map($(".tipoPassageiro option:selected"), (e) => e.value);
alert(listaResultados);
    
25.11.2018 / 19:27
Tie does not perform all it should How to search a collection of JSON a certain register with Angle 2x?