Foros del Web - Ver Mensaje Individual - [Aporte] selects dependientes Ajax 3 niveles XAJAX

ocp001a · #1 (**permalink**) 09/05/2012, 14:05

En vista de los muchos post sobre select dependientes con selecciones por defecto y sobre todo por ajax que hay, decidí hacer este pequeño post.

Está definido para tres niveles, aunque se puede extender fácilmente a más agregando funciones o bien se podría evolucionar a una clase, pero creo que cumple su función para los novatos.

Funciona mediante xajax, lo cual (creo yo) hace más simple el ejemplo. Así, depende de tener la librería xajax instalada en la carpeta xajax.

Se basa en una tabla mysql sin relación con otra u otras, definida como:
tabla colonias_pais:
|estado|municipio|colonia|

Igualmente si se tiene una tabla relacional se puede modificar para que funcione así.

Código PHP:

Ver original<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once("base_datos.php");//incluimos los archivos de conexion
@require_once("xajax/xajax_core/xajax.inc.php");
$xajax = new xajax();
$xajax->configure('javascript URI','xajax');
////Definimos las opciones por fecto. éstas pueden tomarse de $_POST, $_GET, $_SESSION, base de datos o lo que se requiera
$estado_sel='';
$municipio_sel='';
$colonia_sel='';
 
 
function busca_municipios($estado,$sel=''){//definimos la funcion que dado un estado busca los municipios
    $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
    $municipios=mysql_query("select distinct municipio from colonias_pais where estado='$estado'",$con);//buscamos los municipios del estado indicado
    $js="
    var sel=document.getElementById('municipio');//tomamos el select
    sel.length=1;//En caso de tener opciones lo 'vaciamos', dejando solo la primera ";
    $x=1;
    while($m=mysql_fetch_assoc($municipios)){
        $js.="
        sel.length++;//agregamos una nueva opcion
        sel.options[$x].value='$m[municipio]';//Indicamos el valor puede ser diferente al texto
        sel.options[$x].text='$m[municipio]';";
        if($m['municipio']==$sel)//si el municipio es la opcion por defecto
            $js.="sel.options[$x].selected=true;";//indicamos que quede seleccionado
        $x++;
    }
    mysql_free_result($municipios);
    mysql_close();
    $respuesta= new xajaxResponse();//creamos una respuesta tipo xajax
    $respuesta->script($js);//asignamos el script js a la respuesta
    return $respuesta; //respondemos el resultado
}
function busca_colonias($estado,$municipio,$sel=''){//definimos la funcion que dado un estado y municipio busca las colonias
    $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
    $colonias=mysql_query("select distinct colonia from colonias_pais where estado='$estado' and municipio='$municipio'");//ahora buscamos las colonias del estado y municipio
    $js="
    var sel=document.getElementById('colonia');//tomamos el select
    sel.length=1;//En caso de tener opciones lo 'vaciamos', dejando solo la primera ";
    $x=1;
    while($c=mysql_fetch_assoc($colonias)){
        $js.="
        sel.length++;//agregamos una nueva opcion
        sel.options[$x].value='$c[colonia]';
        sel.options[$x].text='$c[colonia]';";
        if($c['colonia']==$sel)//si la colonia es la opcion por defecto
            $js.="sel.options[$x].selected=true;";//indicamos que quede seleccionada
        $x++;
    }
    mysql_free_result($colonias);
    mysql_close();
    $respuesta= new xajaxResponse();//creamos una respuesta tipo xajax
    $respuesta->script($js);//asignamos el script js a la respuesta
    return $respuesta; //respondemos el resultado
}
 
$xajax->registerFunction("busca_municipios");//registramos nuestras funciones php para que se puedan llamar via ajax
$xajax->registerFunction("busca_colonias");
$xajax->processRequest();//Indicamos a xajax que procese las respuestas.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <?php $xajax->printJavascript();?>
  </head>
  <body>
    <label>Estado</label>
   <select name="estado" id="estado" onchange="xajax_busca_municipios(this.value,'<?php echo $municipio_sel?>');"><!-- Al cambiar, llamara la funcion que buscara los municipios del estado selecionado, pasando ademas el municipio por defecto si lo hubiera-->
    <option value="">Seleccione...</option>
    <?php
        $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
        $estados=mysql_query("select distinct estado from colonias_pais",$con);//distinct para obtener los estados sin repetirse
        while($p=mysql_fetch_assoc($estados)){
            echo "<option value=\"$p[estado]\" ";
            if($p['estado']==$estado_sel)//$estado_sel seria la opción por defecto, puede ser obtenida por post, sesion, bd etc.
                echo 'selected';
            echo ">$p[estado]</option>";
        }
        mysql_free_result($estados);
        mysql_close();
    ?>
   </select>
    <label>Municipio</label>
   <select name="municipio" id="municipio" onchange="xajax_busca_colonias(document.getElementById('estado').value,this.value,'<?php echo $colonia_sel?>');"><!-- Ahora pasamos dos parametros, el estado y la colonia seleccionada-->
        <option value="">Seleccione...</option>
   </select>
    <label>Colonia</label>
   <select name="colonia" id="colonia">
        <option value="">Seleccione...</option>
   </select>
    
  </body>
</html>