0

Eu tenho um html e um script em Jquery que adiciona telefones a um cadastro de clientes dinamicamente. Estou tentando colocar máscaras de dois tipos diferentes para cada tipo de telefone que possa ser cadastrado. Porém ao percorrer os elementos inseridos dinamicamente não estou conseguindo recuperar o valor do select para saber qual máscara colocar.

Meu HTML:

<div class="container">
  <h1>Olá, mundo!</h1>

  <div class="form-group">
    <label class="control-label">Telefones</label>
    <div class="col-md-4 mb-2">
        <button class="btn btn-primary" id="btn-add-telefone">Adicionar telefone</button>
    </div>
    <div class="col-md-8" id="div-telefones">

    </div>                
  </div>
</div>

Meu script:

$(document).ready(function () {
var qtdTelefones = 0;

$("#btn-add-telefone").click(function (e) {
    e.preventDefault();

    var blocoTelefone = '<div class="row mb-2">' +
        '    <div class="col-md-2">' +
        '        <input type="cel" name="Telefones[' + qtdTelefones + '].DDD" maxlength="2" placeholder="DDD" class="form-control txt-ddd" />' +
        '    </div>' +
        '    <div class="col-md-6">' +
        '        <input type="text" name="Telefones[' + qtdTelefones + '].Numero" maxlength="9" placeholder="Número" class="form-control txt-numero" />' +
        '    </div>' +
        '    <div class="col-md-3 tipos-telefones">' +
        '        <select name="Telefones[' + qtdTelefones + '].tipoTelefone" class="form-control sel-tipo">' +
        '            <option value="0">Celular</option>' +
        '            <option value="1">Residencial</option>' +
        '            <option value="2">Comercial</option>' +
        '        </select>' +
        '    </div>' +
        '    <div class="col-md-1">' +
        '        <button class="btn btn-danger btn-remover-telefone">Excluir' +
        '        </button>' +
        '    </div>' +
        '</div>';
    
    $("#div-telefones").append(blocoTelefone);
    qtdTelefones++;
    $(".txt-numero").mask("99999-9999");
});


$("#div-telefones").on("change", ".sel-tipo", function () { 

    $(".tipos-telefones").each(function (indice, elemento) {
        var opcao = $(".sel-tipo option:selected").val();

        alert("Valor da repetição: " + indice + "elemento: " + elemento.innerHTML);            
        alert("Valor do drop: " + opcao);
    });        
    
});
});
1
  • @Sam pode formalizar um exemplo para ficar mais claro? Obrigado! O valor recuperado, independente de quantos elementos forem criados, sempre retorna o primeiro em todas as iterações.
    – Heitor
    Commented 11/09/2021 às 3:56

1 Resposta 1

2

O problema está nessa linha aqui:

var opcao = $(".sel-tipo option:selected").val();

Vai retornar sempre o valor do primeiro select que possui a classe .sel-tipo (mais especificamente, o option selecionado) porque não foi especificado qual deles se houver mais de um, porém é redundante usar option:selected nesse caso pois o .val() já retorna o valor do option selecionado. Nesse caso, se fosse só um elemento, bastaria apenas usar $(".sel-tipo").val().

Mas como podem ser mais de um elemento, é preciso especificar, em cada volta do .each(), qual deles você quer pegar o valor, ou seja, o valor do select contido dentro da div atual em cada iteração do laço.

Aí você pode fazer de duas formas. Uma usando .find():

var opcao = $(elemento).find(".sel-tipo").val();
ou
var opcao = $(".sel-tipo", elemento).val(); // forma abreviada

Ou pelo índice, usando :eq(), já que cada índice de .tipos-telefones é o mesmo do select.sel-tipo contido nele:

var opcao = $(".sel-tipo").eq(indice).val();
2
  • 1
    Consegui fazer @Sam. Agradeço a sua ajuda e feedback! O meu código ficou assim: ` $("#div-telefones").on("change", ".sel-tipo", function () { $("#div-telefones .row").each(function (indice, elemento) { var opcao = $(elemento).find(".sel-tipo").val(); if (opcao == '0'){ $(elemento).find(".txt-numero").mask("99999-9999"); } else{ $(elemento).find(".txt-numero").mask("9999-9999"); } }); }); Abraços!
    – Heitor
    Commented 12/09/2021 às 22:54
  • 1
    Que bom amigo. Fico feliz. Abs!
    – Sam
    Commented 12/09/2021 às 22:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .