Combo box com estados e cidades?

HTML

JavaScript

PHP

19/11/2018

Criei uma combo box em que ao selecionar o estado, no próximo combo box carregasse respectivamente as cidades contidas naquele estado. Obs: Sou iniciante em php e javascript ainda estou cursando e queria uma ajuda.

O meu código nesse momento consegue exibir do banco somente meus estados e ao selecionar um estado não aparece cidade nenhuma no outro combo box.

Tenho 2 tables no meu banco chamadas cidades e estado. A tabela estado contém colunas com seu código, sigla e nome. E a tabela cidades contém colunas com código do estado correspondente, o código dela e seu nome.

Página php: Trazendo os estados com seu nome
<?php 
include('conexao.php');
mysqli_set_charset($conn,'utf8'); 
	$sql = "SELECT * FROM estados ORDER BY nome";
	$res = mysqli_query($conn, $sql);
	$num = mysqli_num_rows($res);

	for ($i=0; $i < $num; $i++) { 
		$dados = mysqli_fetch_array($res);
		$arrEstados[$dados['cod_estados']] = $dados['nome'];
	}

?>

Combo box html:
<div>
						<select class="selection-2" name="estado" id="estado" onchange="buscar_cidades()">
							<option value="">Selecione o Estado</option>
							<?php foreach ($arrEstados as $value => $name) {
								echo "<option value='{$value}'>{$name}</option>";
							}
							?>
							</select>
</div>


Código php trazendo cidades:

<?php
include('conexao.php');
$estado = $_GET['estado'];  
$sql = "SELECT * FROM cidades WHERE estados_cod_estados = $estado ORDER BY nome";  
$res = mysqli_query($conn, $sql);
$num = mysqli_num_rows($res);
//monto um array de cidades
for ($i = 0; $i < $num; $i++) {
  $dados = mysqli_fetch_array($res);
  $arrCidades[$dados['cod_cidades']] = utf8_encode($dados['nome']);
}
?>

Funcão do js:

function buscar_cidades(){
			var estado = $('estado').val();

				if(estado){

					var url = 'ajax_buscar_cidades.php?estado='+estado;
					$.get(url, function(dataReturn){
						$('#load_cidades').html(dataReturn);
					});
				}


E a combo box de cidades que no caso não aparecem elas quando seleciono o estado:

<div id="load_cidades">
					<select class="selection-2" name="cidade" required="cidade" id="cidade">
						<option value="">Selecione o Estado</option>
						<?php foreach ($arrCidades as $value => $nome) {
							echo "<option value='{$value}'>{$nome}</option>";
						
						}

						?>	
					</select>
					</div>
Marcus Vinícius

Marcus Vinícius

Curtidas 0

Respostas

Angelo Rubin

Angelo Rubin

19/11/2018

Olá,
Simulei como ficaria o JS com uma resposta já pronta do servidor (um array de objetos) com as cidades e estados, simplificados e juntos para fins de demonstração, veja se ajuda - https://codepen.io/angelorubin/pen/ZwWXqr?editors=0010
GOSTEI 0
Angelo Rubin

Angelo Rubin

19/11/2018

Olá,
Simulei como ficaria a parte do Javascript/HTML como ja tivesse recebido do servidor (um array de objetos) com as cidades e estados, manipulando o dom diretamente com js (o que não é aconselhável), pois:

Estruturas modernas usam algoritmos de diferenciação em operações DOM porque as operações DOM são muito lentas, relativamente falando, portanto, queremos fazer o menor número possível delas para ter desempenho. Quando estamos trabalhando apenas com dados, não estamos limitados pelo DOM em desempenho.


Uma ideia melhor seria utilizar um framework como React JS e cia que lida bem melhor com este problema.

Montei um exemplo aqui (manipulando o dom diretamente com JS), veja se ajuda - https://codepen.io/angelorubin/pen/ZwWXqr?editors=0010
GOSTEI 0
Fernando C

Fernando C

19/11/2018

uma forma bem mais simples:
http://trocadicas.blogspot.com/2018/11/combo-cidades-estados-sem-ajax.html
GOSTEI 0
POSTAR