Take value from a select

Question

I have the following form:

I would like to take the value of select as you add more fields. I’m trying to take it this way, but it only returns me the Pax, IE, always the first value, even when I select the Adult or other value of select.

<table border="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);
});

Answer 1

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

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

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

No need to use option:selected. The value of select already is the option selected.

Answer 2

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 only one element, and returns the value of the first item in the list.

How 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 results list with each:

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

Or generate a list of results using map:

var listaResultados = $.map($(".tipoPassageiro option:selected"), (e) => e.value);
alert(listaResultados);