Combos Anidados con JQuery

Hay muchas maneras de crear combos anidados a través de javascript (ajax), aunque muchas veces necesitamos hacerlo de manera eficiente. Aqui propongo una manera donde los combos se cargan rápidamente a través de un servicio Json. El ejemplo tipico es elegir un Estado geográfico y que al seleccionarlo aparezcan las Ciudades asociadas a este Estado.

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 += '' + j[i].texto + '';
$("#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.