Lo primero que hacemos es crear el servicio del lado del servidor, donde el código quedaría mas o menos asi:
archivo: "./servicios/json.getCiudades.php"
// Conectarse a la base de datos
$option='[';
if($_GET['id'] && is_numeric($_GET['id'])) {
$result=mysql_query("select id_ciudad,nombre_ciudad from ciudades where id_estado='".$_GET['id']."'");
if($result && mysql_num_rows($result)>0) {
$error = false;
while ($row = mysql_fetch_array($result))
{
$option.= '{ "valor": "'.$row[0].'", "texto": "'.$row[1].'"}, ';
}
$option = substr( $option , 0, -2);
}
mysql_close();
}
$option=$option.']';
header('Content-Type: text/html; charset=ISO-8859-1');
echo($option);
Tambien podriamos utilziar una función de PHP llamada json_encode() para convertir un objeto directamente al formato JSON, sin embargo las primeras versiones de PHP no disponen nativamente de esta función. La razón de utilizar JSON es que puede ser convertido directamente en un objeto de javascript a través de una evaluación directa en el código.
Del lado del cliente, crearemos dos combos llamados ciudad y estado, de esta manera:
< html>...
< body>...
< form>...
< select name="estado" id="estado>< /select>
< select name="ciudad" id="estado>< /select>
< /form>
< /body>
< /html>
Luego incrustamos un bloque JQUERY para poder generar las ciudades dependientes del Estado seleccionado. Lo podriamos insertar directamente despues de la etiqueta body o donde sea mas cómodo. El código quedaría de esta manera:
< script type="text/javascript">
$(function() {
$("select#estado").change(function(){
$.ajax({
url: "./servicios/json.getCiudades.php?id=" + $(this).val(),
type: "GET",
dataType: "json",
error: function() {
alert("hay un error en el servicio de datos");
return false;
},
success: function(j) {
var opciones = '';
for (var i = 0; i < j.length; i++)
opciones += '';
$("#ciudad").html(opciones);
}
});
});
});
< /script>
Y listo!, con este código estamos invocando al script en PHP que trae las ciudades según el código de estado y las renderizamos directamente del lado del cliente dentro del combo ciudades. Observarán que la formación del combo de ciudades es casi instantáneo.