Lista desplegable condicional

andrews · #1 (**permalink**) 06/07/2006, 09:21

Saludos para todos;

Alguien tendrá idea de donde puedo obtener un ejemplo de una página HTML que contenga una lista desplegable y dependiendo del valor seleccionado se muestren campos diferentes en la misma página.

Es decir, si el usuario selecciona la opción dias; se deben mostrar siete campos; si selecciona la opción mes; se deben mostrar doce campos (que son diferentes a los siete anteriores).

Gracias mil por adelantado...

andrews · #2 (**permalink**) 07/07/2006, 09:48

Adjunto les dejo para que lo tengan a la mano la solución de mi problema, espero que pueda ayudar a alguien.

<script type="text/javascript">
function muestra(formulario)
{
switch(formulario)
{
case 0:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 1:
document.getElementById("TD").style.display="inlin e";
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 2:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="inlin e";
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 3:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="inli ne";
document.getElementById("CTA").style.display="none ";
break;
case 4:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="inli ne";
break;
}
}
</script>
<body>

<form>
<select onchange="muestra(this.selectedIndex);">
<option value="0">Seleccione un producto</option>
<option value="1">Tarjeta de débito</option>
<option value="2">Tarjeta de crédito</option>
<option value="3">Fideicomiso</option>
<option value="4">Cuenta de ahorro, corriente o FAL</option>
</select>
</form>

<form action="" method="post" name="form1" id="TD" style="display:none;">
Tarjeta de débito
</form>

<form id="TC" name="form1" method="post" action="" style="display:none;">
Tarjeta de crédito
</form>

<form id="CTA" name="form1" method="post" action="" style="display:none;">
Cuenta ahorro, corriente o FAL
</form>

<form id="FID" name="form1" method="post" action="" style="display:none;">
Fideicomiso
</form>

JavierB · #3 (**permalink**) 07/07/2006, 10:56

Hola andrews

He simplificado un poco tu código:

Código PHP:

  <script type="text/javascript">
var teveo = null;
var formus = [null, 'TD', 'TC', 'FID', 'CTA'];
function muestra(formulario) {
  if (teveo != null)
    document.getElementById(teveo).style.display = 'none';
  if (formus[formulario] != null)
    document.getElementById(formus[formulario]).style.display = 'block';
  teveo = formus[formulario]
}
</script>

Espero que te sirva. Saludos,