Foros del Web » Programando para Internet » Javascript »

Problema con lista desplegable dinámica

 Estas en el tema de Problema con lista desplegable dinámica en el foro de Javascript en Foros del Web. Buenas noches, Tengo un formulario HTML que estoy creando para registrar la forma de pago que ha seleccionado el usuario (deposito bancario, transferencia bancaria y ...
  #1 (permalink)  
Antiguo 20/10/2007, 17:32
Avatar de Daam  
Fecha de Ingreso: octubre-2007
Ubicación: Planeta Tierra
Mensajes: 152
Antigüedad: 16 años, 6 meses
Puntos: 0
Exclamación Problema con lista desplegable dinámica
Buenas noches,

Tengo un formulario HTML que estoy creando para registrar la forma de pago que ha seleccionado el usuario (deposito bancario, transferencia bancaria y mercadopago). Existe una capa con ID distinto con casillas personalizadas para cada uno. Ej: existe la capa deposito que contiene elementos de formularios como: monto depositado, entidad bancaria, fecha del deposito, entre otros. La capa de transferencia tiene otros elementos distintos y la de mercadopago también.

Quisiera saber como hacer para que al cargar la página no se muestre ninguna de esas tres capas. Y dependiendo del valor de un select que contiene tres opciones (deposito, transferencia, mercadopago) se muestre una determinada capa.

He probado con CSS colocándole a las capas la propiedad de visibility:hidden; pero no se esconde la capa. Necesito ayuda con Javascript para terminar este formulario.

Espero su colaboración, saludos.
  #2 (permalink)  
Antiguo 20/10/2007, 19:10
Avatar de Scorpion05  
Fecha de Ingreso: noviembre-2006
Mensajes: 31
Antigüedad: 17 años, 5 meses
Puntos: 0
Re: Problema con lista desplegable dinámica
Amigo esto es un pequeño ejemplo que quizás pueda servirle. Saludos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function Mostrar(valor){
if(valor == 1)
{
document.getElementById('1').style.display = "block";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
}
else if(valor == 2)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "block";
document.getElementById('3').style.display = "none";

}else if(valor == 3)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "block";

}
else
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
}

}
</script>
</head>

<body>
<p>
<select name="select" onchange="Mostrar(this.options[this.options.selectedIndex].value);">
<option value="" selected>--Seleccione--</option>
<option value="1">deposito</option>
<option value="2">transferencia</option>
<option value="3">mercadopago</option>
</select>
</p>
<table id="1" width="50%" border="1" style="display:none">
<tr>
<td>Deposito</td>
</tr>
</table>
<table id="2" width="50%" border="1" style="display:none">
<tr>
<td>transferencia</td>
</tr>
</table>
<table id="3" width="50%" border="1" style="display:none">
<tr>
<td>Mercado Pago </td>
</tr>
</table>
<p>&nbsp;</p>
</body>
</html>
  #3 (permalink)  
Antiguo 20/10/2007, 20:05
Avatar de Daam  
Fecha de Ingreso: octubre-2007
Ubicación: Planeta Tierra
Mensajes: 152
Antigüedad: 16 años, 6 meses
Puntos: 0
De acuerdo Re: Problema con lista desplegable dinámica
Muchas gracias! ya pude solucionar el problema.

Esperaba hacerlo usando DIVs con ID pero estuve probando y solo me sirve con tablas ID, da igual.

Saludos y muchísimas gracias.
  #4 (permalink)  
Antiguo 20/10/2007, 20:07
Avatar de Scorpion05  
Fecha de Ingreso: noviembre-2006
Mensajes: 31
Antigüedad: 17 años, 5 meses
Puntos: 0
Re: Problema con lista desplegable dinámica
por nada amigo
  #5 (permalink)  
Antiguo 21/10/2007, 10:50
Avatar de Daam  
Fecha de Ingreso: octubre-2007
Ubicación: Planeta Tierra
Mensajes: 152
Antigüedad: 16 años, 6 meses
Puntos: 0
Exclamación Re: Problema con lista desplegable dinámica
El problema que tengo ahora es que estoy utilizando dos listas select y necesito agregarles el script pasado a cada una.

Sucede que cuando lo intente, me tiró un error ya que cuando selecciono algún item de la primera lista, se muestra, pero al seleccionar algún item de la segunda se esconde la primera y muestra la segunda solamente.

Intente editar un poco el código y me quedo así:

Código: 
Código de la primera lista desplegable de tres items:

<script language="javascript">
function Mostrar(valor){
if(valor == 1)
{
document.getElementById('1').style.display = "block";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
}
else if(valor == 2)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "block";
document.getElementById('3').style.display = "none";

}else if(valor == 3)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "block";
}
else
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
}
}
</script>
Código: 
Código de la segunda lista desplegable de 12 items:

<script language="javascript">
function Mostrando(valor){
if(valor == 4)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "block";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 5)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "block";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 6)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "block";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 7)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "block";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 8)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "block";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 9)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "block";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 10)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "block";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";

}else if(valor == 11)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "block";
document.getElementById('12').style.display = "none";

}else if(valor == 12)
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "block";

}
else
{
document.getElementById('1').style.display = "none";
document.getElementById('2').style.display = "none";
document.getElementById('3').style.display = "none";
document.getElementById('4').style.display = "none";
document.getElementById('5').style.display = "none";
document.getElementById('6').style.display = "none";
document.getElementById('7').style.display = "none";
document.getElementById('8').style.display = "none";
document.getElementById('9').style.display = "none";
document.getElementById('10').style.display = "none";
document.getElementById('11').style.display = "none";
document.getElementById('12').style.display = "none";
}

}
</script>
Como pueden ver, en el código de la primera lista desplegable de tres tablas dentro solo coloco tres document.getElementById('x').style.display = "none"; pero mi problema es que cuando hago la prueba en el navegador (iexplorer y firefox) si selecciono algún item de la primera lista se muestra, pero al seleccionar alguno de la segunda, se esconde la primera lista y se muestra la segunda. Caso contrario si primero elijo un item de la segunda lista y despues selecciono uno de la segunda que si se muestran ambos. Pero al cambiar la selección de la segunda lista se vuelve a ocultar la primera y solo se muestra esta última.

Los "values" de los "options" de la segunda lista los empecé a enumerar desde el número 4.

Los items que están dentro de cada lista desplegable "escondidos" son tablas que contienen a sus vez objetos de formulario.

Espero la colaboración de la comunidad foroselweb.

Saludos.
  #6 (permalink)  
Antiguo 21/10/2007, 20:47
Avatar de Daam  
Fecha de Ingreso: octubre-2007
Ubicación: Planeta Tierra
Mensajes: 152
Antigüedad: 16 años, 6 meses
Puntos: 0
Pregunta Re: Problema con lista desplegable dinámica
Si hay otra manera de manejar las lista desplegables estaría dispuesto a cambiar ese script. Se oyen sugerencias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:34.