Ayuda - combos anidados

[suncubus]

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:

function nuevoAjax()
{ 
    /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
    lo que se puede copiar tal como esta aqui */
    var xmlhttp=false;
    try
    {
        // Creacion del objeto AJAX para navegadores no IE
        xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e)
    {
        try
        {
            // Creacion del objet AJAX para IE
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E)
        {
            if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
        }
    }
    return xmlhttp; 
}
 
// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="paises";
listadoSelects[1]="estados";
 
function buscarEnArray(array, dato)
{
    // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
    var x=0;
    while(array[x])
    {
        if(array[x]==dato) return x;
        x++;
    }
    return null;
}
 
function cargaContenido(idSelectOrigen)
{
    // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
    var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
    // Obtengo el select que el usuario modifico
    var selectOrigen=document.getElementById(idSelectOrigen);
    // Obtengo la opcion que el usuario selecciono
    var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
    // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
    if(opcionSeleccionada==0)
    {
        var x=posicionSelectDestino, selectActual=null;
        // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
        while(listadoSelects[x])
        {
            selectActual=document.getElementById(listadoSelects[x]);
            selectActual.length=0;
            
            var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
            selectActual.appendChild(nuevaOpcion);  selectActual.disabled=true;
            x++;
        }
    }
    // Compruebo que el select modificado no sea el ultimo de la cadena
    else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
    {
        // Obtengo el elemento del select que debo cargar
        var idSelectDestino=listadoSelects[posicionSelectDestino];
        var selectDestino=document.getElementById(idSelectDestino);
        // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
        var ajax=nuevoAjax();
        ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
        ajax.onreadystatechange=function() 
        { 
            if (ajax.readyState==1)
            {
                // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
                selectDestino.length=0;
                var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
                selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;    
            }
            if (ajax.readyState==4)
            {
                selectDestino.parentNode.innerHTML=ajax.responseText;
            } 
        }
        ajax.send(null);
    }
}
 

mensr.php

Código HTML:

<script type="text/javascript" src="select_dependientes.js"></script>
<fieldset id="fterritorio">
            <label for="territorio">Selecciona el Territorio</label>
            <select name="territorio" id="territorio" onchange="cargaContenido(this.id)">
              <? //Mostrar territorios
                $consultaTerritorio="SELECT * FROM territorios";
                $resultadoTerritorio=mysql_query($consultaTerritorio);
                ?>
              <option value="*">Todos</option>
              <?
                while($filaTerritorio = mysql_fetch_array($resultadoTerritorio)){ ?>
              <option value="<? $filaTerritorio["id"]; ?>"><? echo $filaTerritorio["opcion"];?></option>
              <? }?>
          </select>
          </fieldset>
            
            <fieldset id="fzona">
            <label for="zona">Selecciona la zona</label>
            <select name="zona" id="zona" onchange="">        
                 <option value="*">Todas</option>         
            </select>
            </fieldset>
            
            <fieldset id="foficina" >
            <label for="oficina">Selecciona la oficina</label>
            <select name="oficina" id="oficina" onchange="">        
                 <option value="*">Todas</option>     
            </select>
            </fieldset>
 

select_dependientes_proceso.php

Código PHP:

<?php
include 'conexion.php';
    
// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido
$listadoSelects=array(
"territorios"=>"territorios",
"zonas"=>"zonas"
"oficinas"=>"oficinas"
);
 
function validaSelect($selectDestino)
{
    // Se valida que el select enviado via GET exista
    global $listadoSelects;
    if(isset($listadoSelects[$selectDestino])) return true;
    else return false;
}
 
function validaOpcion($opcionSeleccionada)
{
    // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico
    if(is_numeric($opcionSeleccionada)) return true;
    else return false;
}
 
$selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"];
 
if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada))
{
    $tabla=$listadoSelects[$selectDestino];
    
    $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
    
    
    // Comienzo a imprimir el select
    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
    echo "<option value='*'>Todas</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
        $registro[1]=htmlentities($registro[1]);
        // Imprimo las opciones del select
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }           
    echo "</select>";
}
?>
 

[GatorV]

Tema movido desde PHP a AJAX

[maycolalvarez]

para empezar el ejemplo es muy viejo, porque usa short-tags que están desactivados y depreciados en las versiones más recientes de php, debes adaptarlo usando <?php