show city depending on the state selected - php

Question

My script is working, the problem is that I am on a page to edit, and was to appear all data
<tr>
<td class="left">Estado</td>
<td>
<select name="estado" id="select2_1" onChange="buscar_cidades()" style="width: 40%;">
<option value="">--</option>
<?php foreach ($arrEstados as $value => $name) {
echo "<option value='{$value}' ".selected($estado,$value).">{$name}</option>";
}?>
</select>
</td>
</tr>
<tr>
<td class="left">Cidade</td>
<td>
<div id="load_cidades">
<select name="cidade" id="select2_2" style="width: 50%;">
<option value="">Select the state</option>
</select>
</div>
</td>
</tr>
function buscar_cidades(){
var estado = $('#select2_1').val();
if(estado){
var url = 'ajax_cidades.php?estado='+estado;
$.get(url, function(dataReturn) {
$('#load_cidades').html(dataReturn);
});
}
}
my file ajax_cidades.php
<?php
require_once('application/config/database.php');
$estado = $_GET['estado'];
$sql = "SELECT * FROM loc_cidade WHERE id_uf = $estado ORDER BY nome";
$res = mysql_query($sql) or die(mysql_error());
$num = mysql_num_rows($res);
for ($i = 0; $i < $num; $i++) {
$dados = mysql_fetch_array($res);
$arrCidades[$dados['id']] = $dados['nome'];
}
?>
<select name="cidade" id="select2_2" style="width: 50%;">
<?php foreach($arrCidades as $value => $nome){
echo "<option value='{$value}'>{$nome}</option>";
}
?>
I already tried everything and could not, function 'selected' checks are equal to brand as 'selected'
print screen
http://oi44.tinypic.com/pu5w6.jpg

Answer 1

I'm not sure why you are having your ajax_cidades.php loop through the same data twice.
<?php
require_once('application/config/database.php');
$estado = $_GET['estado'];
$sql = "SELECT * FROM loc_cidade WHERE id_uf = $estado ORDER BY nome";
$res = mysql_query($sql) or die(mysql_error());
$num = mysql_num_rows($res);
echo '<select name="cidade" id="select2_2" style="width:50%;">';
for ($i = 0; $i < $num; $i++) {
$dados = mysql_fetch_array($res);
echo '<option value="'.$dados['id'].'">'.$dados['nome'].'</option>';
}
echo '</select>';
?>
also, try debugging what the ajax call is returning, by adding
console.log(dataReturn)
to your function after $.get(url, function(dataReturn) {
then check your console to make sure your page is returning the data expected.