[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>

donangelomix · #2 (**permalink**) 09/05/2012, 14:57

y en el caso de cargar el formulario aparesca por defecto la opcion seleccio0nada de la base de datos

ocp001a · #3 (**permalink**) 09/05/2012, 15:00

Cita:

Iniciado por donangelomix

y en el caso de cargar el formulario aparesca por defecto la opcion seleccio0nada de la base de datos

Creo que el ejemplo no puede ser más claro, y acepta opción por defecto a los tres niveles.

a_gomez · #4 (**permalink**) 10/05/2012, 08:13

podrias pasarnos un ejemplol de tu .sql ?? para mirar todo el proceso completo

gracias .....

donangelomix · #5 (**permalink**) 10/05/2012, 08:35

no aplicaria para el caso de paises/provincias/comunas tres tablas con id,nombre,relacion

ocp001a · #6 (**permalink**) 10/05/2012, 13:00

Cita:

Iniciado por a_gomez

podrias pasarnos un ejemplol de tu .sql ?? para mirar todo el proceso completo

gracias .....

CREATE TABLE IF NOT EXISTS `colonias_pais` (
`estado` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`municipio` varchar(60) COLLATE utf8_unicode_ci NOT NULL,
`colonia` varchar(60) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `colonias_pais` (`estado`, `municipio`, `colonia`) VALUES
('Puebla', 'Atlixco', 'Centro');

ocp001a · #7 (**permalink**) 10/05/2012, 13:03

Cita:

Iniciado por donangelomix

no aplicaria para el caso de paises/provincias/comunas tres tablas con id,nombre,relacion

No, tal cual no aplicaría, pero ahí es donde debes saber adaptarlo a que consulte el id en la tabla que se relacione.

gudyto_0789 · #8 (**permalink**) 22/08/2012, 00:46

Hola, me gustaria saber si puedo rescatar los valores del combo con esta funcion
codigo javascript
-----------------
function valor() {

indice = document.getElementById("municipio").value;
alert(indice)

codigo php(parte del codigo de ejemplo de mas arriba)
------------
<select name="municipio" id="municipio" onchange="xajax_busca_colonias(document.getElement ById('estado').value,this.value,'<?php echo $colonia_sel?>');javascript:valor();">
<option value="">Seleccione...</option>
</select>

estoy intentando rescatar el id y otros campos mas para alterar el google map q tengo en mi formulario sin envargo hasta el momento no e tenido exito

Gracias por la ayuda y el codigo.