How to get the current value of a select in a Row using the JS or Jquery click event

Question

Inside the div 'div-documents' I add Rows dynamically to user documents (CPF, CNPJ, etc.). For the select. sel-document-type I have one two events: Click (for me to store the value of the select that was originally selected by the user) and Change (for selecting the value of the select that was chosen by the user then). The event change, works perfectly, but the event event click is not getting the value of select. Is it the bind that’s getting in the way? It takes the value of another line wrong. How do I get the value of the correct select?

Hug to all!

<div class="form-horizontal">
    <div class="form-group row">
        <div class="col-md-12">
            <div class="col-md-12" id="div-documentos">
                <div class="form-group align-items-center row">
                    <div class="card card-shadow col-md-12 pl-0 pr-o pt-0 pb-0 border border-default">
                        <div class="card-block">

                        </div>
                        <div class="card-block">
                            <div class="form-group align-items-center">
                                <input class="hid-id" data-val="true" data-val-required="The Id field is required." id="PessoaViewModel_PessoasDocumentosViewModel_0__Id" name="PessoaViewModel.PessoasDocumentosViewModel[0].Id" type="hidden" value="13">
                                <input class="hid-pessoaId" data-val="true" data-val-required="Escolha uma Pessoa" id="PessoaViewModel_PessoasDocumentosViewModel_0__PessoaId" name="PessoaViewModel.PessoasDocumentosViewModel[0].PessoaId" type="hidden" value="4">
                                <input class="hid-documento-tipo-descricao" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoDescricao" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoDescricao" type="hidden" value="TÍTULO DE ELEITOR">

                                <div class="col-md-6">
                                    <label class="control-label lb-documento-tipo" for="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId">Tipo de Documento</label>
                                    <select data-id="7" title="Selecione uma opção" class="form-control sel-documento-tipo select2-hidden-accessible" data-val="true" data-val-required="Escolha um Tipo de Documento" id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" name="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId" data-select2-id="PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId" tabindex="-1" aria-hidden="true"><option value=""></option><option value="1">CPF - CADASTRO NACIONAL DE PESSOA FÍSICA</option>
                                        <option value="3">RG - REGISTRO GERAL</option>
                                        <option value="4">RNE - REGISTRO NACIONAL DE ESTRANGEIROS</option>
                                        <option selected="selected" value="7" data-select2-id="2">TÍTULO DE ELEITOR</option>
                                        <option value="8">CTPS - CARTEIRA DE TRABALHO E PREVIDÊNCIA SOCIAL</option>
                                        <option value="9">CNH - CARTEIRA NACIONAL DE HABILITAÇÃO</option>
                                        <option value="10">CAM - CERTIFICADO DE ALISTAMENTO MILITAR</option>
                                        <option value="11">PASSAPORTE</option>
                                        <option value="12">NIS - NÚMERO DE IDENTIFICAÇÃO SOCIAL</option>
                                        </select><span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="1" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" title="Selecione uma opção" tabindex="0" aria-labelledby="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container"><span class="select2-selection__rendered" id="select2-PessoaViewModel_PessoasDocumentosViewModel_0__DocumentoTipoId-container" role="textbox" aria-readonly="true" title="TÍTULO DE ELEITOR"><span class="select2-selection__clear" data-select2-id="3">×</span>TÍTULO DE ELEITOR</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    <span class="text-danger val-documento-tipo field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].DocumentoTipoId" data-valmsg-replace="true"></span>
                                </div>
                                <div class="col-md-6">
                                    <label class="control-label lb-documento" for="PessoaViewModel_PessoasDocumentosViewModel_0__Documento">Núm. Documento</label>
                                    <input type="text" class="form-control txt-documento" data-val="true" data-val-maxlength="O campo Documento deve ter no máximo 30 caracteres" data-val-maxlength-max="30" data-val-required="O campo Número do Documento é obrigatório" id="PessoaViewModel_PessoasDocumentosViewModel_0__Documento" name="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" value="12345">
                                    <span class="text-danger val-documento field-validation-valid" data-valmsg-for="PessoaViewModel.PessoasDocumentosViewModel[0].Documento" data-valmsg-replace="true"></span>
                                </div>


                            </div>
                        </div>
                        <div class="card-block">
                            <div class="card-actions float-right">
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-icon btn-default btn-outline btn-remover-documento" title="Excluir Documento"><i class="icon wb-trash" aria-hidden="true"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group align-items-center row">                     

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

JS:

$("#div-documentos").on("change", ".sel-documento-tipo", function (e) {
    //Este evento já funciona

}).bind("click", ".sel-documento-tipo", function (e) {
    //Não estou conseguindo capturar o valor do select atual.
    var valorSelect = $(this).closest('.row').find('.sel-documento-tipo').val();
    alert(teste);
});

Answer 1

I don’t understand why you’re using the bind click. Just change doesn’t solve your problem? This way below it no longer brings the value of select?

$("#div-documentos").on("change", ".sel-documento-tipo", function (e) {
    var valorSelect = $(this).val();
    alert(valorSelect);
});

Hug!