Combo box com estados e cidades?

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

Curtir t�pico + 0

Responder

Posts

27/01/2019

Angelo Rubin

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

Responder

Gostei + 0

27/01/2019

Angelo Rubin

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

Responder

Gostei + 0

28/01/2019

Fernando C

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

Responder

Gostei + 0