Como crear 2 menus dependientes uno del otro??

[fearhds]

Pues esa es mi pregunta, a ver si me podeis poner un ejemplo sencillito de como segun el valor que coja el primer menu desplegable, el segundo menu desplegable cogera unos valores o otros de una base de datos.

Por ejemplo escogiendo una ciudad de origen en el primero que salgan los posibles destinos.


Muchas gracias :)

[Ziyad]

Si quieres hacerlo en PHP, tendrás que añadir el evento "onchange=this.form.submit" al primer select. Así, cada vez que se cambie el elemento seleccionado, el formulario se enviará. Y podrás recoger en la variable $_POST correspondiente la opción elegida.

<select name="pais" id="pais" onChange="this.form.submit()">

A partir de ahí, ya dependiendo de como se llenen tus select. Haces con ella lo que necestes para que el otro cargue los valores que corresponden.

[T4ke0veR]

creo q deberias combinarlo un poco con java... a er si esto t sirve!!!

un archivo llamado conexion

Código PHP:

  <?php
function conectar()
{
    mysql_connect("localhost", "root", "");
    mysql_select_db("nombre_db");
}
 
function desconectar()
{
    mysql_close();
}
?>   

luego un archivo css llamado select_dependientes.css

Código PHP:

  #demoIzq, #demoDer { border:1px dashed; width:296px; background-color:#EAEAEA; text-align:center; }
 
#demoDer { float:right; }
 
select { width:220px; } 
   

otro select_dependistes.js <- javascript

Código PHP:

  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);
    }
} 
   

[T4ke0veR]

select_dependientes.php

Código PHP:

  <?php
function generaPaises()
{
    include 'conexion.php';
    conectar();
    $consulta=mysql_query("SELECT id, opcion FROM lista_paises");
    desconectar();
 
    // Voy imprimiendo el primer select compuesto por los paises
    echo "<select name='paises' id='paises' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</option>";
    while($registro=mysql_fetch_row($consulta))
    {
        echo "<option value='".$registro[0]."'>".$registro[1]."</option>";
    }
    echo "</select>";
}
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>
<link rel="stylesheet" type="text/css" href="select_dependientes.css">
<script type="text/javascript" src="select_dependientes.js"></script>
</head>
 
<body>
 
            <div id="demo" style="width:600px;">
                <div id="demoDer">
                    <select disabled="disabled" name="estados" id="estados">
                        <option value="0">Selecciona opci&oacute;n...</option>
                    </select>
                </div>
                <div id="demoIzq"><?php generaPaises(); ?></div>
            </div>
            
</body>
</html>  

select_dependientes_proceso.php

Código PHP:

  <?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(
"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 'conexion.php';
    conectar();
    $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error());
    desconectar();
    
    // Comienzo a imprimir el select
    echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>";
    echo "<option value='0'>Elige</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>";
}
?>   

Suerte

[sarika]

Hola, estoy haciendo una pagina con un buscador donde hay dos lstas una con provincias y otra con localidades. Lo que quiero es que al elegir una provincia carge la segunda lista con las localidades de la provincia elegida. Tengo este codigo y no veo ningún error, pero no me funciona. El problema es que no me accede a la funcion listarlocalidad (si que hace el onchange porque el alert del onchange lo imprime).

Puede ser que mi ordenador no deje ejecutar algunas cosas, que tenga que instalar algo???

Mucas gracias con antelación. Cualquier sugerencia o idea me sirve

BUSCADOR.PHP


<html>
<head>


<?php

include("conectar.php");
$link=Conectarse();
echo "Conexión con la base de datos conseguida.<br>";

?>

<title>Casas de Pueblo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function listarlocalidad(xloc){
alert(xloc);
document.forms.buscador.selecprovincia.disable=tru e;
document.forms.buscador.seleclocalidad.length=0;
cargarlocalidades(xloc);
documents.forms.buscador.selecprovincia.disable=fa lse;
}
function cargarlocalidades(xprov){
alert(xprov);
var opcion;
document.forms.buscador.seleclocalidad.disable=tru e;
<?php
$tablalocalidades=mysql_query('Select * from localidades order by idlocalidad ASC', $link);
while ($registrolocalidades=mysql_fetch_array($tablaloca lidades)){
?>
if(xprov==<?php echo $registrolocalidades["idprovincia"];?>){
opcion=document.createElement("OPTION");
opcion.text='<?php echo $registrolocalidades["nombre"];?>';
opcion.value=<?php echo $registrolocalidades["idlocalidad"];?>;
document.forms.buscador.seleclocalidad.options.add (opcion);
}
<?php
}
mysql_free_result($tablalocalidades); ?>
document.forms.buscador.seleclocalidad.disable=fal se;
}
</script>
</head>

<body>

<form action="" method="post" name="buscador" class="Estilo26 Estilo2 Estilo35 Estilo38">
<table width="552" height="413" border="0" align="center" cellspacing="0">

<tr>
<td width="161" align="center" valign="middle">&nbsp;</td>
<td width="387" align="center" valign="middle"><span class="Estilo27">B&uacute;squeda de Inmuebles</span></td>
</tr>
<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="20" align="left" valign="bottom">


Provincia
<select name="selecprovincia" size="1" id="idselecprovincia" onChange="alert(“Hola”);listarlocalidad(this.value );">
<option value="-1">todos</option>
<?php

echo "Vamos a filtrar";
$sql="select * from provincia";
$rs=mysql_query($sql,$link);
while ($row = mysql_fetch_array($rs)){
?>
<option value="<?php echo $row["idprovincia"];?>"> <?php echo $row["nombre"],$row["idprovincia"]; ?> </option>
<?php
}
?>
</select>
</td>
</tr>

<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="20" align="left" valign="bottom">
<p>Localidad
<select name="seleclocalidad" size="1" id="seleclocalidad">
<option value="-1">todos</option>
</select>

</p> </td>
</tr>
<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="20" align="left" valign="bottom">Tipo Inmueble
<select name="selectipo" size="1" id="selectipo">
<option value="-1">todos</option>
<?php
$sql="select * from tipos";
$rs=mysql_db_query("casaspueblos",$sql);
while ($row = mysql_fetch_array($rs)){
?>
<option value="<?php echo $row["idtipo"];?>"> <?php echo $row["nombre"], $row["idtipo"];
}
?>
</select></td>
</tr>
<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="20" align="left" valign="bottom"><input name="txtlocalidad" type="text" id="txtlocalidad"></td>
</tr>
<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="20" align="left" valign="bottom">
<input name="Avanzada" type="submit" id="Avanzada" value="B&uacute;squeda Avanzada ...">

</td>
</tr>
<tr>
<td align="left" valign="bottom">&nbsp;</td>
<td height="25" align="left" valign="bottom"><span class="Estilo38">
<input type="submit" name="Submit" value="Enviar">

</td>
</tr>

</table>
</form>
<?php
mysql_free_result($casaspueblos);
mysql_close($link);
?>
</body>
</html>