1

Boa tarde,

Estou com um problema com meu select de estados e cidades.

Quando eu digito um CEP ele preenche os campos automaticamente, já consigo preencher até o Estado mesmo ele sendo um select e melhor ainda não necessitando setar as siglas dos Estados em "option value", porém a cidade não é selecionada, veja bem: ela é exibida no campo abaixo ou seja o vínculo entre cidade e estado está funcionando, porém ele não seta a cidade que foi recebida do script de CEP, segue abaixo os códigos:

cep.js

$("#cep_res").blur(function() {

var url = "http://cep.republicavirtual.com.br/web_cep.php";
var cep = $(this).val();

 $.ajax({
    type: "GET",
    dataType: 'json',
    data: {'cep': cep, 'formato': 'json'},
    async: false,
    url: url,
    success: function(response) {

        if (response.resultado === '1') {

            $("#bairro_res").val(response.bairro);
            $("#logradouro_res").val(response.logradouro);

            var uf = response.uf;
            $("select#estado_ress option").each(function() {
                this.selected = (this.text === uf);
            });

            var cidade = response.cidade;
            $("select#cidade_ress option").each(function() {
                this.selected = (this.text === cidade);
            });

            $("#estado_ress").trigger("change");

        }

    }
 });

});

formulário.php

        <label>Estado <span>*</span></label>
        <select class="classic" name="estado_res" id="estado_ress">
            <option value="0">Selecione</option>
            <?php
                $q = "SELECT * FROM estado ORDER BY nome";
                $g = connect($q);
                while($e = mysql_fetch_assoc($g[0])){
                    echo '<option value="'.$e['id'].'">'.$e['uf'].'</option>';
                }
            ?>
        </select>
        <script>
            $(document).ready(function(){
                $('#estado_ress').change(function(){
                    var param = $(this).val();

                    $.post("../escola/busca_cidade.php", { est: param }, function(valor){
                            $("#aqui_cidadec").html(valor);

                        }

                    );
                });
            });
        </script>
        <div id="aqui_cidadec">
            <label>Cidade <span>*</span></label>
            <select class="classic" name="cidade_res" id="cidade_ress" style="text-transform:none !important;">
                    <option value="0">Selecione</option>
            </select>
        </div>

busca_cidade.php

<?php

require_once('./lib/classes/conexao.php'); 
require_once('./lib/functions/functions.func.php'); 
require_once('./lib/classes/mysql.class.php');
if(!empty($_REQUEST['est'])){

    $q = "SELECT * FROM cidade WHERE estado = '".$_REQUEST['est']."'";
    $g = connect($q);
    echo '<label>Cidade <span>*</span></label>';
    echo '<select class="classic" name="cidade_res" id="cidade_ress">
                <option value="0">Selecione</option>';

    while ( $l = mysql_fetch_assoc($g[0]) ) {
        echo '<option value="'.$l['id'].'">'.$l['nome'].'</option>';
    }
    echo '</select>';
} else { ; }
?>

Ao final do formulario.php eu tenho o seguinte script:

<script src="<?php echo $url_site; ?>lib/js/cep.js" type="text/javascript"></script>

Quem tiver sugestões do que pode ser feito ou algum erro que cometi, pode comentar aí!

1

1 Resposta 1

0

Não é recomendado usar async: false. Veja o porquê nesta pergunta.

Isso é porque você está querendo pegar a cidade antes de processar o Ajax que troca o Estado e popula o select das cidades, assim o código não sabe qual option selecionar.

Precisa fazer o laço...

$("select#cidade_ress option").each(function() {
    this.selected = (this.text === cidade);
});

...após o select das cidades ser populado. Faça o seguinte: envie o valor da cidade como parâmetro do trigger para o Ajax dos estados e coloque o laço naquele Ajax:

var cidade = response.cidade;
$("#estado_ress").trigger("change", cidade);

E no Ajax dos Estados (evento change), receba o valor cidade enviado pelo trigger e faça o laço:

$('#estado_ress').change(function(e, cidade){
   var param = $(this).val();

   $.post("../escola/busca_cidade.php", { est: param }, function(valor){
      $("#aqui_cidadec").html(valor);

      $("select#cidade_ress option").each(function() {
         this.selected = (this.text === cidade);
      });

   });
});

Resumindo, o Ajax do CEP ficaria assim:

$.ajax({
    type: "GET",
    dataType: 'json',
    data: {'cep': cep, 'formato': 'json'},
    async: false,
    url: url,
    success: function(response) {

        if (response.resultado === '1') {

            $("#bairro_res").val(response.bairro);
            $("#logradouro_res").val(response.logradouro);

            var uf = response.uf;
            $("select#estado_ress option").each(function() {
                this.selected = (this.text === uf);
            });

            var cidade = response.cidade;

            $("#estado_ress").trigger("change", cidade);

        }

    }
 });

});

E o dos Estados assim:

$('#estado_ress').change(function(e, cidade){
   var param = $(this).val();

   $.post("../escola/busca_cidade.php", { est: param }, function(valor){
      $("#aqui_cidadec").html(valor);

      $("select#cidade_ress option").each(function() {
         this.selected = (this.text === cidade);
      });

   });
});

Edit

Função para remover os acentos dos nomes das cidades:

function remAcentos(p){

   var acc = {
      'â': 'a', 'à': 'a', 'ã': 'a', 'â': 'a', 'á': 'a',
      'é': 'e', 'ê': 'e',
      'í': 'i',
      'ó': 'o', 'õ': 'o', 'ô': 'o',
      'ú': 'u'
   }

   return p.replace(/[áàãâéêíóõôú]/g, function(m){
      return acc[m];
   });

}

Para usar a função, inclua a variável cidade ao chamá-la:

$('#estado_ress').change(function(e, cidade){

      cidade = remAcentos(cidade); // AQUI REMOVE OS ACENTOS

      $("select#cidade_ress option").each(function() {
         this.selected = (this.text.toLowerCase() === cidade);
      });

});

Também é interessante adicionar um toLowerCase() aqui:

this.selected = (this.text.toLowerCase() === cidade);

Porque pode ser que alguma cidade pode vir com letra maiúscula acentuada. Com toLowerCase() esse problema é contornado.

5
  • Funcionou certinho aqui cara! Era isso mesmo que tava acontecendo então, não me atentei para os laços! Só mais uma coisa, a minha base de dados está com as cidades todas sem acentuação então quando digito o CEP de uma cidade que tem acento, o valor não bate porque tá vindo lá da consulta no ajax com acento e no meu banco tá sem acento, ai ele não seleciona! Como eu posso contornar isso? Muito obrigado pela ajuda! Eu já estava ficando doido com esses selects Commented 17/03/2018 às 20:20
  • Tranquilo, vou colocar na resposta daqui a pouco o que vc pode fazer pra resolver o problema dos acentos.
    – Sam
    Commented 17/03/2018 às 20:20
  • Veja lá, coloquei uma função só pra isso. É bom que vc pode usar ela sempre que quiser remover acentos.
    – Sam
    Commented 17/03/2018 às 20:49
  • Não deixe de marcar ✓ na resposta. Abs!
    – Sam
    Commented 17/03/2018 às 21:36
  • Show de bola! Funcionou aqui.Tá marcado já! E muito obrigado novamente amigo! Commented 17/03/2018 às 21:45

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 .