-1

Tenho um campo de CEP onde efetuo uma consulta via javascript, até ai tudo bem, está funcionando, no meu formulário tenho campo de logadouro, numero, bairro (cidade e estado que são selects) queria selecionar a linha do select de acordo com essa consulta, eu consigo selecionar mas ele não mostra para o usuário, inclusive tentei implementar um select preencher o outro com o estado e as cidades e não consegui, se alguém puder me ajudar nesse ponto eu agradeço! mas segue o código para melhor entendimento.

Selects

<div class="row">
    {{--estado--}}
    <div class="col-md-4">
        <div class="form-group">
            <label>UF</label>
            <div class="input-group">
                <div class="input-group-addon icone-input">
                    <i class="fa fa-map"></i>
                </div>
                <select id="parc_uf" name="parc_uf" style="width: 100%">
                    <option selected value='0'>Selecione um estado</option>
                    @foreach($estados as $e) @if(Session::get('parc_uf') == $e->id)
                    <option selected value='{{$e->id}}'>{{$e->uf_sigla}}</option>
                    @else
                    <option value='{{$e->id}}'>{{$e->uf_sigla}}</option>
                    @endif @endforeach
                </select>
            </div>
        </div>
    </div>

    {{--Cidade--}}
    <div class="col-md-8">
        <div class="form-group">
            <label>Municipio</label>
            <div class="input-group">
                <div class="input-group-addon icone-input">
                    <i class="fa fa-map"></i>
                </div>
                <select id="parc_mun" name="parc_mun" style="width: 100%">
                    <option value='0'>Selecione um Municipio</option>
                    @foreach($municipios as $m) @if(Session::get('parc_cidade') == $m->id)
                    <option selected value='{{$m->id}}'>{{$m->mun_nome}}</option>
                    @else
                    <option value='{{$m->id}}'>{{$m->mun_nome}}</option>
                    @endif @endforeach
                </select>
            </div>
        </div>
    </div>
</div>

Java Script

<!-- Adicionando JQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous"></script>


<!-- Adicionando Javascript -->
<script type="text/javascript" >

    $(document).ready(function() {

        function limpa_formulário_cep() {
            // Limpa valores do formulário de cep.
            $("#parc_end").val("");
            $("#parc_bairro").val("");
            $("#cidade").val("");
            $("#uf").val("");
            $("#ibge").val("");
        }

        //Quando o campo cep perde o foco.
        $("#parc_cep").blur(function() {

            //Nova variável "cep" somente com dígitos.
            var cep = $(this).val().replace(/\D/g, '');

            //Verifica se campo cep possui valor informado.
            if (cep != "") {

                //Expressão regular para validar o CEP.
                var validacep = /^[0-9]{8}$/;

                //Valida o formato do CEP.
                if(validacep.test(cep)) {

                    //Preenche os campos com "..." enquanto consulta webservice.
                    $("#parc_end").val("...");
                    $("#bairro").val("...");
                    $("#cidade").val("...");
                    $("#uf").val("...");
                    $("#ibge").val("...");

                    //Consulta o webservice viacep.com.br/
                    $.getJSON("https://viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {

                        if (!("erro" in dados)) {
                            //Atualiza os campos com os valores da consulta.
                            $("#parc_end").val(dados.logradouro);
                            $("#parc_bairro").val(dados.bairro);
                            $("#cidade").val(dados.localidade);
                            $("#uf").val(dados.uf);
                            $("#ibge").val(dados.ibge);

                            var comboCidades = document.getElementById("parc_mun");
                            var comboEstados = document.getElementById("parc_uf");
                            var str_cidade = dados.localidade;
                            var str_uf= dados.uf;

                            for (var i = 0; i < comboCidades.length; i ++) {
                                if(comboCidades.options[i].text == str_cidade.toUpperCase()){
                                    comboCidades.options[i].setAttribute("selected", true)
                                }
                            }

                            for (var i = 0; i < comboEstados.length; i ++) {
                                if(comboEstados.options[i].text == str_uf.toUpperCase()){
                                    comboEstados.options[i].setAttribute("selected", true)
                                }
                            }


                        } //end if.
                        else {
                            //CEP pesquisado não foi encontrado.
                            limpa_formulário_cep();
                            alert("CEP não encontrado.");
                        }
                    });
                } //end if.
                else {
                    //cep é inválido.
                    limpa_formulário_cep();
                    alert("Formato de CEP inválido.");
                }
            } //end if.
            else {
                //cep sem valor, limpa formulário.
                limpa_formulário_cep();
            }
        });
    });

</script>

resultado - Pode perceber que está selecionado mas ele mostra a primeira opção:

inserir a descrição da imagem aqui

4
  • duas dicas: 1) seria melhor comparar por "id" no lugar do "text", 2), use .setAttribute("selected", "selected"). Veja se isso resolve o problema 3/06/2019 às 8:20
  • Parece que você está usando alguma biblioteca que trabalha com os elementos do form(select), é provavel que na documentação do mesmo exista a explicação de como setar um valor default, deixando só como selected não vai funcionar mesmo 3/06/2019 às 11:20
  • O problema é nos dois campos, cidade e estado?
    – Sam
    3/06/2019 às 16:07
  • Realmente não funcionou, Sim nas duas Selects, uma é estado e a outra é cidade! e como estou utilizando uma biblioteca que não não tem o mesmo id que o meu já que vem de uma busca de um site, fica difícil comparar por id! 3/06/2019 às 23:27

1 Resposta 1

0

Parece que você esta utilizando a biblioteca Select2, se esse for o caso, após o trazer os dados e preencher os seletcs você precisa executar o select2 novamente para efetuar as mudanças e renderizar elas:

$("#uf").val(dados.uf);
$("#uf").select2(); 

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 .