<title>Exemplo: Populando selects de cidades e estados com AJAX (PHP e jQuery) </title>
<style type="text/css">
*, html {
font-family: 'Montserrat', sans-serif;
margin: 0px;
padding: 0px;
font-size: 12px;
}
label {font-weight:300;font-size:18px;}
a {
color: #0099CC;
}
body {
margin: 10px;
}
.carregando{
color:#666;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<div class="col-md-6">
<label for="cod_estados">Estado:</label>
<select name="cod_estados" id="cod_estados" class="form-control">
<option value=""></option>
<?php
$sql = "SELECT cod_estados, sigla
FROM estados
ORDER BY sigla";
$res = mysqli_query($con, $sql);
Pergunta
jamiel
Pessoal, vou tentar ser o mais breve possível.
Tenho esses arquivos:
- cidades.ajax.php
- index.php
- db_cidades.php
db_cidades:
<?php
$con = mysqli_connect('localhost', 'adwpbeta', '46ocs7aA1J');
if (!$con) {
die("Falha ao conectar o banco de dados: ". mysqli_error());
}
$db = mysqli_select_db($con, 'adwpbeta_select_cidades');
if (!$db) {
die("Falha ao selecionar banco de dados: ". mysqli_error());
}
//mysqli_set_charset('utf8', $con);
?>
cidades.ajax.php
<?php
include('db_cidades.php');
header( 'Cache-Control: no-cache' );
header( 'Content-type: application/xml; charset="utf-8"', true );
//mysql_set_charset('utf8', $con);
mysql_query("SET NAMES 'utf8'", $con);
mysql_query('SET character_set_connection=utf8', $con);
mysql_query('SET character_set_client=utf8', $con);
mysql_query('SET character_set_results=utf8', $con);
$cod_estados = mysqli_real_escape_string( $_REQUEST['cod_estados'] );
$cidades = array();
$sql = "SELECT cod_cidades, nome
FROM cidades
WHERE estados_cod_estados=$cod_estados
ORDER BY nome";
$res = mysqli_query($con, $sql);
while ( $row = mysqli_fetch_assoc( $res ) ) {
$cidades[] = array(
'cod_cidades' => $row['cod_cidades'],
'nome' => $row['nome'],
);
}
echo( json_encode( $cidades ) );
?>
index.php
<?php include('db_cidades.php'); ?>
<html>
<head>
<!--<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>-->
<link rel="stylesheet" href="css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,400,500,600,700" rel="stylesheet">
<title>Exemplo: Populando selects de cidades e estados com AJAX (PHP e jQuery) </title>
<style type="text/css">
*, html {
font-family: 'Montserrat', sans-serif;
margin: 0px;
padding: 0px;
font-size: 12px;
}
label {font-weight:300;font-size:18px;}
a {
color: #0099CC;
}
body {
margin: 10px;
}
.carregando{
color:#666;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<div class="col-md-6">
<label for="cod_estados">Estado:</label>
<select name="cod_estados" id="cod_estados" class="form-control">
<option value=""></option>
<?php
$sql = "SELECT cod_estados, sigla
FROM estados
ORDER BY sigla";
$res = mysqli_query($con, $sql);
while ( $row = mysqli_fetch_assoc( $res ) ) {
echo '<option value="'.$row['cod_estados'].'">'.$row['sigla'].'</option>';
}
?>
</select>
</div>
<div class="col-md-6">
<label for="cod_cidades">Cidade:</label>
<span class="carregando">Aguarde, carregando...</span>
<select name="cod_cidades" id="cod_cidades" class="form-control">
<option value="">-- Escolha um estado --</option>
</select>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.6.1');
</script>
<script type="text/javascript">
$(function(){
$('#cod_estados').change(function(){
if( $(this).val() ) {
$('#cod_cidades').hide();
$('.carregando').show();
$.getJSON('cidades.ajax.php?search=',{cod_estados: $(this).val(), ajax: 'true'}, function(j){
var options = '<option value=""></option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j.cod_cidades + '">' + j.nome + '</option>';
}
$('#cod_cidades').html(options).show();
$('.carregando').hide();
});
} else {
$('#cod_cidades').html('<option value="">– Escolha um estado –</option>');
}
});
});
</script>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<!--<script src="js/jquery-1.11.3.js"></script> -->
</body>
</html>
O problema é o seguinte:
A listagem dos estados ocorre normalmente. Mas, ao selecionar o estado as cidades ficam carregando eternamente ou carregam e não mostram nada.
Subi para esse servidor, para quiser ver o funcionamento: http://adwpbeta.tk/select-cidades/
Agradeço desde já qualquer ajuda.
Editado por jamielLink para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.