Selects Dependientes

[Shevkorn]

Hola a todos, bueno este mensaje envio para aquellas personas que tienen el problema de los selects dependientes, o sea que el contenido de una, se vea en otra pero por cascada, y practicando en el browser (lo hice para IE) y con un poco de paciencia logre esto.. haber si lo adaptan para cualquier browser. pero en fin, el codigo consta de dos archivos uno que llame index.php y el otro procesa.php
Bueno trate de simular el hecho de que existan niveles, grados y secciones para poder hacer esto.
Aca va el codigo fuente

index.php

Código PHP:

  <?/***index.php*/?>
<iframe id="nivel" name="nivel" style="border:0px;width:0px; height:0px;" src='procesa.php?o=niv'></iframe>
<iframe id="grado" name="grado" style="border:0px;width:0px; height:0px;" src='procesa.php?o=blank&target=grado'></iframe>
<iframe id="seccion" name="seccion" style="border:0px;width:0px; height:0px;" src='procesa.php?o=blank&target=seccion'></iframe>
<form name='frm'>
<table>
    <tr>
        <td colspan='2'><font face='tahoma' size='-1' color='#DC9A52'>Selects dependientes con Iframes ocultos by Taek <a href='mailto:[email protected]' title='Dudas,correcciones o comentarios enviame un email'>Email</a></font></td>
    </tr>
    <tr>
        <td>Texto</td>
        <td><input type='text' name='texto' size='15'></td>
    </tr>
    <tr>
        <td>Nivel</td>
        <td><div id='cnivel'></div></td>
    </tr>
    <tr>
        <td>Grado</td>
        <td><div id='cgrado'></div></td>
    </tr>
    <tr>
        <td>Seccion</td>
        <td><div id='cseccion'></div></td>
    </tr>
    <tr>
        <td></td>
        <td><input type='button' value='Enviame' onclick='enviarDx();'></td>
    </tr>
</table>
</form>
<script>
function completarCombo(elemento,combo)
{
    if(combo==1&&elemento!=-1)
    {
        document.frames['grado'].location='procesa.php?o=grad&id='+elemento;
        document.frames['seccion'].location='procesa.php?o=blank';
    }
    else if(combo==2&&elemento!=-1)
    {
        document.frames['seccion'].location='procesa.php?o=sec&id='+elemento;
    }
    else
    {
        switch(combo)
        {
            case 1:
                document.frames['grado'].location='procesa.php?o=blank&target=grado';
                document.frames['seccion'].location='procesa.php?o=blank&target=seccion';
            break;
            case 2:
                document.frames['seccion'].location='procesa.php?o=blank&target=seccion';
            break;
        }
    }
}
function enviarDx()
{
    n=window.parent.document.getElementById('combo_nivel').value;
    g=window.parent.document.getElementById('combo_grado').value;
    s=window.parent.document.getElementById('combo_seccion').value;
    t=frm.texto.value;
    cadena='procesa.php?o=resultados&nivel='+n+'&grado='+g+'&seccion='+s+'&texto='+t;
    location.replace(cadena);
}
</script>  

procesa.php

Código PHP:

  <?php
/***procesa.php*/
    $o=$_GET['o'];
    switch($o)
    {
        case 'niv':
            $cont="window.parent.document.getElementById('cnivel').innerHTML ='"
                 ."<select name=combo_nivel onchange=\"completarCombo(this.value,1);\">"
                 ."<option value=\"-1\">Seleccione una opcion</option>"
                 ."<option value=\"1\">lolo</option>"
                 ."<option value=\"2\">lolo</option>"
                 ."</select>';";
        break;
        case 'grad':
            $id=$_GET['id'];
            //hacer la consulta sql con el codigo del nivel
            //e imprimir los valores en cada option  dejar el option -1
            $cont="window.parent.document.getElementById('cgrado').innerHTML ='"
                 ."<select name=combo_grado onchange=\"completarCombo(this.value,2);\">"
                 ."<option value=\"-1\">Seleccione una opcion</option>"
                 ."<option value=\"1\">lolo</option>"
                 ."<option value=\"2\">lolo</option>"
                 ."<option value=\"3\">este es el id $id</option>"
                 ."</select>';";
        break;
        case 'sec':
            //hacer la consulta sql con el codigo del grado
            //e imprimir los valores en cada option  dejar el option -1
            $id=$_GET['id'];
            $cont="window.parent.document.getElementById('cseccion').innerHTML ='"
                 ."<select name=combo_seccion >"
                 ."<option value=\"-1\">Seleccione una opcion</option>"
                 ."<option value=\"1\">lololo</option>"
                 ."<option value=\"2\">lololo</option>"
                 ."<option value=\"3\">este es el id $id</option>"
                 ."</select>';";
        break;
        case 'blank':
            $target=$_GET['target'];
            switch($target)
            {
                case 'grado':
                    $cont="window.parent.document.getElementById('cgrado').innerHTML ='"
                          ."<select name=combo_grado>"
                         ."<option value=\"-1\">Seleccione una opcion</option>"
                           ."</select>';";
                break;
                case 'seccion':
                    $cont="window.parent.document.getElementById('cseccion').innerHTML ='"
                          ."<select name=combo_seccion>"
                           ."<option value=\"-1\">Seleccione una opcion</option>"
                           ."</select>';";
                break;
            }
        break;
        case 'resultados':
            $nivel=$_GET['nivel'];
            $grado=$_GET['grado'];
            $seccion=$_GET['seccion'];
            $texto=$_GET['texto'];
            echo $nivel.' '.$grado.' '.$seccion.' '.$texto;
        break;
    }
?>
<script>
    function enviarDatos()
    {
        <?echo $cont?>
    }
    enviarDatos();
</script>  

Listo.. allì esta, cualquier duda o comentario mandame un mail o respondeme en este foro
[email protected]