Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/12/2010, 13:18
suncubus
 
Fecha de Ingreso: diciembre-2007
Mensajes: 140
Antigüedad: 17 años
Puntos: 0
Ayuda - combos anidados

Hola, estoy intentando realizar tres combos anidados, para ello me he basado en un ejempolo, pero no consigo hacer que funcione, sabeis que puedo estar haciendo mal?

select_dependientes.js
Código Javascript:
Ver original
  1. function nuevoAjax()
  2. {
  3.     /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
  4.     lo que se puede copiar tal como esta aqui */
  5.     var xmlhttp=false;
  6.     try
  7.     {
  8.         // Creacion del objeto AJAX para navegadores no IE
  9.         xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  10.     }
  11.     catch(e)
  12.     {
  13.         try
  14.         {
  15.             // Creacion del objet AJAX para IE
  16.             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  17.         }
  18.         catch(E)
  19.         {
  20.             if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
  21.         }
  22.     }
  23.     return xmlhttp;
  24. }
  25.  
  26. // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
  27. var listadoSelects=new Array();
  28. listadoSelects[0]="paises";
  29. listadoSelects[1]="estados";
  30.  
  31. function buscarEnArray(array, dato)
  32. {
  33.     // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
  34.     var x=0;
  35.     while(array[x])
  36.     {
  37.         if(array[x]==dato) return x;
  38.         x++;
  39.     }
  40.     return null;
  41. }
  42.  
  43. function cargaContenido(idSelectOrigen)
  44. {
  45.     // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
  46.     var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
  47.     // Obtengo el select que el usuario modifico
  48.     var selectOrigen=document.getElementById(idSelectOrigen);
  49.     // Obtengo la opcion que el usuario selecciono
  50.     var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
  51.     // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
  52.     if(opcionSeleccionada==0)
  53.     {
  54.         var x=posicionSelectDestino, selectActual=null;
  55.         // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
  56.         while(listadoSelects[x])
  57.         {
  58.             selectActual=document.getElementById(listadoSelects[x]);
  59.             selectActual.length=0;
  60.            
  61.             var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
  62.             selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
  63.             x++;
  64.         }
  65.     }
  66.     // Compruebo que el select modificado no sea el ultimo de la cadena
  67.     else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
  68.     {
  69.         // Obtengo el elemento del select que debo cargar
  70.         var idSelectDestino=listadoSelects[posicionSelectDestino];
  71.         var selectDestino=document.getElementById(idSelectDestino);
  72.         // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
  73.         var ajax=nuevoAjax();
  74.         ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
  75.         ajax.onreadystatechange=function()
  76.         {
  77.             if (ajax.readyState==1)
  78.             {
  79.                 // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
  80.                 selectDestino.length=0;
  81.                 var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
  82.                 selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;   
  83.             }
  84.             if (ajax.readyState==4)
  85.             {
  86.                 selectDestino.parentNode.innerHTML=ajax.responseText;
  87.             }
  88.         }
  89.         ajax.send(null);
  90.     }
  91. }

mensr.php
Código HTML:
Ver original
  1. <script type="text/javascript" src="select_dependientes.js"></script>
  2. <fieldset id="fterritorio">
  3.             <label for="territorio">Selecciona el Territorio</label>
  4.             <select name="territorio" id="territorio" onchange="cargaContenido(this.id)">
  5.               <? //Mostrar territorios
  6.                $consultaTerritorio="SELECT * FROM territorios";
  7.                $resultadoTerritorio=mysql_query($consultaTerritorio);
  8.                 ?>
  9.               <option value="*">Todos</option>
  10.               <?
  11.                while($filaTerritorio = mysql_fetch_array($resultadoTerritorio)){ ?>
  12.               <option value="<? $filaTerritorio["id"]; ?>"><? echo $filaTerritorio["opcion"];?></option>
  13.               <? }?>
  14.           </select>
  15.           </fieldset>
  16.            
  17.             <fieldset id="fzona">
  18.             <label for="zona">Selecciona la zona</label>
  19.             <select name="zona" id="zona" onchange="">        
  20.                  <option value="*">Todas</option>        
  21.             </select>
  22.             </fieldset>
  23.            
  24.             <fieldset id="foficina" >
  25.             <label for="oficina">Selecciona la oficina</label>
  26.             <select name="oficina" id="oficina" onchange="">        
  27.                  <option value="*">Todas</option>    
  28.             </select>
  29.             </fieldset>

select_dependientes_proceso.php
Código PHP:
Ver original
  1. <?php
  2. include 'conexion.php';
  3.    
  4. // Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
  5. $listadoSelects=array(
  6. "territorios"=>"territorios",
  7. "zonas"=>"zonas"
  8. "oficinas"=>"oficinas"
  9. );
  10.  
  11. function validaSelect($selectDestino)
  12. {
  13.     // Se valida que el select enviado via GET exista
  14.     global $listadoSelects;
  15.     if(isset($listadoSelects[$selectDestino])) return true;
  16.     else return false;
  17. }
  18.  
  19. function validaOpcion($opcionSeleccionada)
  20. {
  21.     // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
  22.     if(is_numeric($opcionSeleccionada)) return true;
  23.     else return false;
  24. }
  25.  
  26. $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
  27.  
  28. if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
  29. {
  30.     $tabla=$listadoSelects[$selectDestino];
  31.    
  32.     $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
  33.    
  34.    
  35.     // Comienzo a imprimir el select
  36.     echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
  37.     echo "<option value='*'>Todas</option>";
  38.     while($registro=mysql_fetch_row($consulta))
  39.     {
  40.         // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
  41.         $registro[1]=htmlentities($registro[1]);
  42.         // Imprimo las opciones del select
  43.         echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
  44.     }          
  45.     echo "</select>";
  46. }
  47. ?>