varios select dependientes

bartman742 · #1 (**permalink**) 04/07/2012, 11:39

hola, tengo el siguiente problema, en una pagina tengo un select que al conectarse a una base de datos despliega todos los estados, al seleccionar uno, un segundo select despliega los municipios, hasta aqui todo bien, mi duda es, como implemento un tercer select que despliegue un listado de compañias y que al seleccionar una de ellas un cuarto select despligue un listado de areas dependiendo de la empresa seleccionada? adjunto mis codigos por si alguien me puede ayudar diciendome que debo modificar, gracias

select_dependientes.php

Código PHP:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?
    include "include/conexionifx.php";
?>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title>
<script type="text/javascript" src="select_dependientes.js"></script>
</head>
<body>
    <div id="demo" style="width:600px;">
        <div id="demoIzq">
    <?
    $Q4="select c13iestado,c13_desc from c13estados where c13_status='A';";
    $resultadoQ4= ifx_prepare($Q4,$conecta,IFX_SCROLL); 
    ifx_do($resultadoQ4);
    ?>
    <select name='paises' id='paises' onChange='cargaContenido(this.id)'>
    <option value='0'>Elige</option>
    <?
    while ($filaQ4=ifx_fetch_row($resultadoQ4,"NEXT"))
    {
    ?>
        <option value=<? echo trim ($filaQ4[c13iestado])?> ><? echo $filaQ4[c13_desc] ?></option>
    <?
    }
    ?>
    </select>
            </div>
                <div id="demoDer">
                    <select disabled="disabled" name="estados" id="estados">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    </select>
                </div>
            </div>          
</body>
</html>

select_dependientes_proceso.php

Código PHP:

Ver original<?
// 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(
"paises"=>"lista_paises",
"estados"=>"lista_estados"
);
 
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];
    include "include/conexionifx.php";
    
    $Q8="select c14idmun,c14_desc from c14delmun where c14_estado=$opcionSeleccionada";
    $resultadoQ8= ifx_prepare($Q8,$conecta,IFX_SCROLL); 
    ifx_do($resultadoQ8);
    // Comienzo a imprimir el select
    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while ($filaQ8=ifx_fetch_row($resultadoQ8,"NEXT"))
    {
        // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion
        $filaQ8[c14_desc]=htmlentities($filaQ8[c14_desc]);
        // Imprimo las opciones del select
        echo "<option value='".$filaQ8[c14idmun]."'>".$filaQ8[c14_desc]."</option>";
    }           
    echo "</select>";
}
?>

bartman742 · #2 (**permalink**) 04/07/2012, 11:40

y estas son las funciones en js.

select_dependientes.js

Código Javascript:

Ver originalfunction 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&oacute;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);
    }
}