menu desplegable con opciones

lady_vampirica · #1 (**permalink**) 30/03/2010, 03:58

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

miktrv · #2 (**permalink**) 30/03/2010, 04:13

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!!!

lady_vampirica · #3 (**permalink**) 30/03/2010, 08:22

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ó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º 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"> </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º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" /> <input type="button" value="Total" onclick="sumas();"/></td>
</center>
<br />
<div align="center"> 
<input type="button" value="Gestionar Reserva" onclick="validar();"/>
 
<input type="reset" name="Borrar" value="Cancelar Reserva" /><br />
 <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