Foros del Web » Programando para Internet » PHP »

[Aporte] selects dependientes Ajax 3 niveles XAJAX

Estas en el tema de [Aporte] selects dependientes Ajax 3 niveles XAJAX en el foro de PHP en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 09/05/2012, 15:05
Avatar de ocp001a
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 2.891
Antigüedad: 9 años, 7 meses
Puntos: 508
[Aporte] selects dependientes Ajax 3 niveles XAJAX

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
  1. <?php
  2. ini_set("display_errors", 1);
  3. require_once("base_datos.php");//incluimos los archivos de conexion
  4. @require_once("xajax/xajax_core/xajax.inc.php");
  5. $xajax = new xajax();
  6. $xajax->configure('javascript URI','xajax');
  7. ////Definimos las opciones por fecto. éstas pueden tomarse de $_POST, $_GET, $_SESSION, base de datos o lo que se requiera
  8. $estado_sel='';
  9. $municipio_sel='';
  10. $colonia_sel='';
  11.  
  12.  
  13. function busca_municipios($estado,$sel=''){//definimos la funcion que dado un estado busca los municipios
  14.     $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
  15.     $municipios=mysql_query("select distinct municipio from colonias_pais where estado='$estado'",$con);//buscamos los municipios del estado indicado
  16.     $js="
  17.     var sel=document.getElementById('municipio');//tomamos el select
  18.     sel.length=1;//En caso de tener opciones lo 'vaciamos', dejando solo la primera ";
  19.     $x=1;
  20.     while($m=mysql_fetch_assoc($municipios)){
  21.         $js.="
  22.         sel.length++;//agregamos una nueva opcion
  23.         sel.options[$x].value='$m[municipio]';//Indicamos el valor puede ser diferente al texto
  24.         sel.options[$x].text='$m[municipio]';";
  25.         if($m['municipio']==$sel)//si el municipio es la opcion por defecto
  26.             $js.="sel.options[$x].selected=true;";//indicamos que quede seleccionado
  27.         $x++;
  28.     }
  29.     mysql_free_result($municipios);
  30.     mysql_close();
  31.     $respuesta= new xajaxResponse();//creamos una respuesta tipo xajax
  32.     $respuesta->script($js);//asignamos el script js a la respuesta
  33.     return $respuesta; //respondemos el resultado
  34. }
  35. function busca_colonias($estado,$municipio,$sel=''){//definimos la funcion que dado un estado y municipio busca las colonias
  36.     $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
  37.     $colonias=mysql_query("select distinct colonia from colonias_pais where estado='$estado' and municipio='$municipio'");//ahora buscamos las colonias del estado y municipio
  38.     $js="
  39.     var sel=document.getElementById('colonia');//tomamos el select
  40.     sel.length=1;//En caso de tener opciones lo 'vaciamos', dejando solo la primera ";
  41.     $x=1;
  42.     while($c=mysql_fetch_assoc($colonias)){
  43.         $js.="
  44.         sel.length++;//agregamos una nueva opcion
  45.         sel.options[$x].value='$c[colonia]';
  46.         sel.options[$x].text='$c[colonia]';";
  47.         if($c['colonia']==$sel)//si la colonia es la opcion por defecto
  48.             $js.="sel.options[$x].selected=true;";//indicamos que quede seleccionada
  49.         $x++;
  50.     }
  51.     mysql_free_result($colonias);
  52.     mysql_close();
  53.     $respuesta= new xajaxResponse();//creamos una respuesta tipo xajax
  54.     $respuesta->script($js);//asignamos el script js a la respuesta
  55.     return $respuesta; //respondemos el resultado
  56. }
  57.  
  58. $xajax->registerFunction("busca_municipios");//registramos nuestras funciones php para que se puedan llamar via ajax
  59. $xajax->registerFunction("busca_colonias");
  60. $xajax->processRequest();//Indicamos a xajax que procese las respuestas.
  61. ?>
  62. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
  63. <html>
  64. <head>
  65.     <?php $xajax->printJavascript();?>
  66.   </head>
  67.   <body>
  68.     <label>Estado</label>
  69.    <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-->
  70.     <option value="">Seleccione...</option>
  71.     <?php
  72.         $con=conectar();//conectamos a la base de datos, esto dependera de como lo hagamos en nuestro script normalmente
  73.         $estados=mysql_query("select distinct estado from colonias_pais",$con);//distinct para obtener los estados sin repetirse
  74.         while($p=mysql_fetch_assoc($estados)){
  75.             echo "<option value=\"$p[estado]\" ";
  76.             if($p['estado']==$estado_sel)//$estado_sel seria la opción por defecto, puede ser obtenida por post, sesion, bd etc.
  77.                 echo 'selected';
  78.             echo ">$p[estado]</option>";
  79.         }
  80.         mysql_free_result($estados);
  81.         mysql_close();
  82.     ?>
  83.    </select>
  84.     <label>Municipio</label>
  85.    <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-->
  86.         <option value="">Seleccione...</option>
  87.    </select>
  88.     <label>Colonia</label>
  89.    <select name="colonia" id="colonia">
  90.         <option value="">Seleccione...</option>
  91.    </select>
  92.    
  93.   </body>
  94. </html>
  #2 (permalink)  
Antiguo 09/05/2012, 15:57
(Desactivado)
 
Fecha de Ingreso: marzo-2012
Mensajes: 108
Antigüedad: 5 años, 9 meses
Puntos: 1
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

y en el caso de cargar el formulario aparesca por defecto la opcion seleccio0nada de la base de datos
  #3 (permalink)  
Antiguo 09/05/2012, 16:00
Avatar de ocp001a
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 2.891
Antigüedad: 9 años, 7 meses
Puntos: 508
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

Cita:
Iniciado por donangelomix Ver Mensaje
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.
  #4 (permalink)  
Antiguo 10/05/2012, 09:13
Avatar de a_gomez  
Fecha de Ingreso: marzo-2012
Ubicación: /var/www/
Mensajes: 48
Antigüedad: 5 años, 9 meses
Puntos: 2
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

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

gracias .....
  #5 (permalink)  
Antiguo 10/05/2012, 09:35
(Desactivado)
 
Fecha de Ingreso: marzo-2012
Mensajes: 108
Antigüedad: 5 años, 9 meses
Puntos: 1
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

no aplicaria para el caso de paises/provincias/comunas tres tablas con id,nombre,relacion
  #6 (permalink)  
Antiguo 10/05/2012, 14:00
Avatar de ocp001a
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 2.891
Antigüedad: 9 años, 7 meses
Puntos: 508
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

Cita:
Iniciado por a_gomez Ver Mensaje
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');
  #7 (permalink)  
Antiguo 10/05/2012, 14:03
Avatar de ocp001a
Colaborador
 
Fecha de Ingreso: mayo-2008
Ubicación: $MX['VZ']['Xalapa']
Mensajes: 2.891
Antigüedad: 9 años, 7 meses
Puntos: 508
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

Cita:
Iniciado por donangelomix Ver Mensaje
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.
  #8 (permalink)  
Antiguo 22/08/2012, 01:46
 
Fecha de Ingreso: agosto-2012
Mensajes: 1
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: [Aporte] selects dependientes Ajax 3 niveles XAJAX

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.

Etiquetas: ajax, dependientes, html, mysql, niveles, selects, sql, tabla, xajax
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 5 personas




La zona horaria es GMT -6. Ahora son las 20:32.