Javascript Select de cidades dinâmico , de acordo com o estado selecionado

cisneiro · 10 de julho de 2020

Pessoal ,preciso que o select das cidades tenha options de acordo com o estado escolhido. Consegui com o código abaixo,porém quando mudo o estado, as cidades anteriores se juntam com as cidades do estado atualmente selecionado. podem ajudar?

<!DOCTYPE html>
<html>
<head>
	<title>estados</title>
	<meta charset="utf-8">	
</head>
<body onload="mods()">
Estado: <select id="estados" onchange ="rj.metodo1();sp.metodo1();mg.metodo1()">
<option></option>
</select><br><br>
Cidade: <select id="cidades">
<option></option>
</select>
</body>
</html>
<script type="text/javascript">
var estados = document.getElementById('estados')
var cidades = document.getElementById('cidades')
/*Método que cada objeto de estado chama quando selecionado no select 'estados'*/

var carregarSelects =function(){
    if (estados.value == this.nome) {
    for (var i = 0; i < this.cidades.length; i++){    
    var item = document.createElement('option')
    item.text = this.cidades[i]
    cidades.appendChild(item)
    }}}  
</script>
<!--Obejetos-->
<script type="text/javascript">
var arrayEstados = ['Rio de Janeiro','São paulo','Minas Gerais']
var rj = {
nome: 'Rio de Janeiro',
cidades: ['Belford Roxo','São joão de meriti','Duque de Caxias'],
metodo1: carregarSelects
} 

var sp = {
nome: 'São paulo',
cidades: ['Diadema','Bauru','Suzano'],
metodo1: carregarSelects
}


var mg = {
nome: 'Minas Gerais',
cidades: ['Belo Horizonte','Betim','Contagem'],
metodo1: carregarSelects
}


function mods(){
	var listaEstados = document.getElementById('estados')

	for (var i = 0; i < arrayEstados.length; i++) {
		var item = document.createElement('option')
		item.text = arrayEstados[i]
		listaEstados.appendChild(item)
}
}
</script>

DiF · 13 de julho de 2020

@cisneiro Olá, os anteriores ficam por que você agrega no elemento com cidades.appendChild(item)

Não é muito ideal fazer isso dessa forma, o código fica extremamente grande se colocar muitos estados e cidades no array.

O ideal é você usar um banco de dados e fazer essas requisições via ajax e php.

cisneiro · 13 de julho de 2020

@DiF eu até pensei nisso, porém os códigos php somente são lidos no carregamento da pagina, com o javaScript consigo alterar no evento onchange do select. E quanto a requisição AJAX, não sei o que é isso e o que faz. tentei dar uma lida aqui ,porém parece que isso já é de outro nível, sou iniciante ainda entende. Mas obrigado pela resposta. se puder dar uma breve explicação desse AJAX, de repente consigo entender.

DiF · 13 de julho de 2020

@cisneiro Basicamente, o ajax é uma requisição assíncrona. Ou seja, em outras palavras, o javascript se comunica com o PHP de forma assíncrona, eliminando o famoso "refresh".

Com isso, você pode fazer uma consulta em banco de dados e retornar o resultado em um novo campo select, de acordo com a pesquisa feita na tabela.

Existem duas formas de usar o ajax. Javascript puro e usando jQuery. A maneira mais fácil é usar o jQuery.

Primeiro você deve importar a biblioteca jquery para seu site. Pode usar o CDN, que é um endereço direto e confiável. O que implica em usar o CDN, é que você fica a mercê do servidor dele, seja microsoft ou google... geralmente eu uso o CDN do google, pois raramente sai do ar.

Se quiser, podes baixar o arquivo jquery.js no site e colocar no seu servidor. Eu recomendo o CDN do google que sempre se mantém atualizado.

Então basicamente só precisa adicionar isso no seu site:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Com ele incluído no site, a parte de requisição ajax fica dessa forma:

Primeiro select de estados:

<select name="estado" id="estado">
   <?php
        include'conexao.php';
  
        $buscaEstado = mysqli_query($conexao, "SELECT idEstado, nomeEstado FROM estado");
  
        while($estado = mysqli_fetch_object($buscaEstado):
              echo "<option value='$estado->idEstado'>$estado->nomeEstado</option>";
        endwhile;
  
</select>  
              
              
<select name="cidade" id="cidade">
</select>

Este primeiro select ele vai buscar o ID estado e o nome Estado na tabela de estados. Depois vai popular o select.

E sim, o select de cidade fica vazio, pois vamos estar populando via ajax

Agora o pulo do gato.

Para selecionar um estado e trazer um novo select com as cidades daquele estado, você precisa usar o jquery e a função $.ajax() desta forma:

//quando seleciona um option
$("#estado").change(function(){
  
  //pega o valor do value do option
  let id = $(this).val();  
  
  //faz a requisião ajax no arquivo php
  $.ajax({
      url:"buscaCidade.php",
      method:"POST",
      dataType: "HTML",
      data: {"id": id}
      
  }).done(function(data){
      $("#cidade").html(data);
  });
  
});

Lá no php no arquivo buscaCidade.php vai fazer desta forma:

   //Recebe o id via ajax 
   $id = $_POST["id"];

    //inclui a conexao com o banco de dados
    include 'conexao.php';

    //faz a busca da cidade, baseada no ID do estado
    $buscaCidade = mysqli_query($conexao, "SELECT idCidade, nomeCidade FROM cidades 
                                           INNER JOIN estado ON estado.IDEstado = cidade.IDestado 
                                           WHERE cidade.idEstado = $id");

    //itera o while  cada resultado encontrado
    while($cidade = mysqli_fetch_object($buscaCidade)):

       echo "<option value='$cidade->idCidade'> $cidade->nomeCidade </option>";

    endwhile;

o resultado que vai ser a linha do echo dentro do while, vai ser colocado dentro do select de cidade vazio pela linha

$("#cidade").html(data); contido dentro da função done() do ajax.

esta função done() é executada quando tudo corre certo.

Basicamente é isso.. não tenho muito o que ensinar. O lance agora é entender com os comentários e implementar.

Apesar do jquery ser "avançado", ele de fato é bem mais fácil de aprender e entender do que javascript puro.

Com ele você faz mais, com menos.

ArThDsL · 17 de julho de 2020

Olá @cisneiro,

Eu mantenho um projeto totalmente gratuito no GitHub chamado LocaliZAZ.js, creio que seria algo interessante para você, o mesmo comporta os estados, cidades e códigos do IBGE, todos os dados em arrays, da ultima vez que realizei os testes, antes de publicar o mesmo, ele realizava consultas entre 0.9450000070501119ms à 9.359999996377155ms (segue a print com o teste realizado anexada).

Caso queira dar uma checada: https://github.com/ArTDsL/LocaliZAZ.js

Espero ter ajudado xD.

Grande abraço.

PS: O número contido dentro dos colchetes não são as cidades, é o código do estado!