Foros del Web » Programando para Internet » Javascript »

menu desplegable con opciones

Estas en el tema de menu desplegable con opciones en el foro de Javascript en Foros del Web. buenas tardes mi duda es la siguiente: Tengo un menu desplegable : <select name="dias" size="1"> <option><option value="1">1</option><option value="2">2</option> </select> y necesito que dependiendo lo que ...
  #1 (permalink)  
Antiguo 30/03/2010, 03:58
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 9 años, 6 meses
Puntos: 0
menu desplegable con opciones

buenas tardes mi duda es la siguiente:

Tengo un menu desplegable :

<select name="dias" size="1"> <option><option value="1">1</option><option value="2">2</option>
</select>

y necesito que dependiendo lo que pinche el usuario me cargue una tabla o otra.

si elige la opcion 1 que cargue el codigo este

<table width="535" height="217" border="1" align="center">
<tr>
<td height="31"><div align="center">Adultos</div></td>
<td><div align="center">15,30</div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="adulto" size="5" />
PAX
</div></td>
</tr>
<tr>
<td width="121" height="44"><div align="center">Infantil<br />(4 a 12 años)</div></td>
<td width="79"><div align="center">10,80</div></td>
<td width="50"><div align="center">x</div></td>
<td width="126"><div align="center">
<input type="text" name="infantil" size="5" /> PAX
</div></td>
</tr>
<tr>
<td height="31"><div align="center">Jubilados</div></td>
<td><div align="center">8,10</div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="jubilado" size="5" />
PAX
</div></td>
</tr>
<tr>
<td height="99">
<div align="center">Familia<br />
Matrimonio + 2 niños<br />(4 a 12 años)</div></td>
<td><div align="center">41,40</div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="grupo" size="5" /> PAX
</div></td>
</tr>
</table>

y si elige la opcion 2 lo mismo per con otros precios que cargue en la misma pagina.

he mirado javascript he mirado html pero no encuentro nada parecido como puedo hacerlo???


la pagina es www.aquamijas.com/entradas.php


mil gracias
  #2 (permalink)  
Antiguo 30/03/2010, 04:13
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.100
Antigüedad: 11 años, 3 meses
Puntos: 165
Respuesta: menu desplegable con opciones

Hola buenas,

Yo lo hago de la siguiente manera:

Código:
function change_view(valor){
	for(i=0; i<5; i++)
	{
		document.getElementById(i).style.display='none';
	}
	document.getElementById(valor).style.display='block';
}
Donde 5 es el número de opciones posibles.

Luego al select le añado la función:

Código:
<select onchange="change_view(this.value);">
Y después creo para cada tabla en este caso una id que corresponde con el número del value de cada optión:

Código:
<table id="1" style="display:none;">
por ejemplo quedará cada tabla con el estilo display:none, después el select con la función en el onchange y despues cada opción con cada su value del 1 al número de tablas y listo. La función oculta el resto de tablas y solo muestra una a la vez, pruébalo!!


Espero que te haya servido!!!
  #3 (permalink)  
Antiguo 30/03/2010, 08:22
 
Fecha de Ingreso: marzo-2010
Mensajes: 11
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: menu desplegable con opciones

muchas gracias lo he probado pero no consigo que al darle en desplegable salga la tabla como es??te paso todo el codigo para que lo mires por fa muchas gracias

<script language="javascript">
function change_view(valor){
for(i=0; i<5; i++)
{
document.getElementById(i).style.display='none';
}
document.getElementById(valor).style.display='bloc k';
}
</script>
<body bgcolor=#003F8A>
<div align="center" class="Estilo1">Reservas On-Line / Booking On-Line</div>
<div align="center"><img src="imagenes/logoola150.png" /><img src="imagenes/online.png" /></div>
<p align="center" class="Estilo3">Por favor,continue hacia la siguiente pagina para realizar su compra</p>
<p align="center" class="Estilo3">Please continue to the next page to make your purchase</p>
<p align="center" class="Estilo3">Fecha de Emisi&oacute;n de la reserva:<script language="javascript">dameFecha();</script>
</p>
<form action="reservas.php" method="post" name="anadirCesta">
<input type="hidden" name="idtransaccion" value=<?php echo "$idtransaccion"?>>

<table width="558" border="1" align="center">
<tr>
<td width="207"><div align="center"><strong>DATOS DE LA RESERVA</strong></div></td>
<td width="335"><div align="center"><strong>DATOS DEL CLIENTE</strong></div></td>
</tr>
</table>
<table width="554" height="106" border="1" align="center">
<tr>
<td width="102">N&ordm; reserva</td>
<td width="96"><?php echo "$total"; ?></p></td>
<td width="140">Nombre y Apellidos</td>
<td width="188"><input name="nombre" type="text" size="28" /></td>
</tr>

<tr>
<td colspan="2" rowspan="4">&nbsp;</td>
<td height="36">DNI</td>
<td colspan="2"><input type="text" name="dni" size="28" /></td>
</tr>
<tr>
<td width="140">Email</td>
<td colspan="2"><input type="text" name="email" size="28" /></td>
</tr>
</table>
<p align="center" class="Estilo3"><strong>DETALLES DE LA RESERVA</strong></p>
<table width="537" height="41" border="1" align="center">
<tr>
<td width="329" height="35"><span class="Estilo2">PARA: PARQUE ACUATICO MIJAS-AQUAMIJAS
<select onchange="change_view(this.value);" name="dias" size="1" >
<option value="1">1</option><option value="2">2</option>

DIA</span></td>
<td width="74">N&ordm;Bono: </td>
<td width="112"> <?php echo "$numero"; ?></td>
</tr></table>

<table id="1" style="display:none" width="535" height="217" border="1" align="center">
<tr>
<td height="31"><div align="center">Adultos</div></td>
<td><div align="center"><input type="text" size="12" name="adult" value="" readonly="readonly" />
</div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="adulto" size="5" />
PAX
</div></td>
</tr>
<tr>
<td width="121" height="44"><div align="center">Infantil<br />(4 a 12 años)</div></td>
<td width="79"><div align="center"><input type="text" size="12" name="infan" value="" readonly="readonly" /></div></td>
<td width="50"><div align="center">x</div></td>
<td width="126"><div align="center">
<input type="text" name="infantil" size="5" /> PAX
</div></td>
</tr>
<tr>
<td height="31"><div align="center">Jubilados</div></td>
<td><div align="center"><input type="text" size="12" name="jubi" readonly="readonly" /></div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="jubilado" size="5" />
PAX
</div></td>
</tr>
<tr>
<td height="99">
<div align="center">Familia<br />
Matrimonio + 2 niños<br />(4 a 12 años)</div></td>
<td><div align="center"><input type="text" size="12" name="fam" readonly="readonly" /></div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="grupo" size="5" /> PAX
</div></td>
</tr>
</table>
<br />
<table id="2" style="display:none;" width="535" height="217" border="1" align="center">
<tr>
<td height="31"><div align="center">Adultos</div></td>
<td><div align="center"><input type="text" size="12" name="adult" value="" readonly="readonly" />
</div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="adulto" size="5" />
PAX
</div></td>
</tr>
<tr>
<td width="121" height="44"><div align="center">Infantil<br />(4 a 12 años)</div></td>
<td width="79"><div align="center"><input type="text" size="12" name="infan" value="" readonly="readonly" /></div></td>
<td width="50"><div align="center">x</div></td>
<td width="126"><div align="center">
<input type="text" name="infantil" size="5" /> PAX
</div></td>
</tr>
<tr>
<td height="99">
<div align="center">Familia<br />
Matrimonio + 2 niños<br />(4 a 12 años)</div></td>
<td><div align="center"><input type="text" size="12" name="fam" readonly="readonly" /></div></td>
<td><div align="center">x</div></td>
<td><div align="center">
<input type="text" name="grupo" size="5" /> PAX
</div></td>
</tr>
</table>
</select>
<br />
<center>
<strong>Precio Total:</strong>
<input type="text" size="12" name="final" readonly="readonly" />&nbsp;<input type="button" value="Total" onclick="sumas();"/></td>
</center>
<br />
<div align="center">&nbsp;
<input type="button" value="Gestionar Reserva" onclick="validar();"/>
&nbsp;
<input type="reset" name="Borrar" value="Cancelar Reserva" /><br />
&nbsp;<img src="imagenes/mastercard.jpg" width="92" height="52" /><img src="imagenes/maestro.jpg" width="93" height="49" /><img src="imagenes/visa.jpg" width="110" height="49" /></div>
</form>
<br />
<center>
</center>
</body>
</html>


otra cosa si quiero que aparezcan las dos al pulsar el dia 2?como lo hago?ya que tendria k sumar los valores de la tabla 1 y 2 al elegir el dia si eligo el dia 1 solo eso.

perdona las molestias

Etiquetas: desplegable, opciones
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




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