formulario, eventos y elementos ocultos

blumen · #1 (**permalink**) 02/07/2008, 05:06

Hola a tod@s. Estoy intentando crear una página donde en principio solo aparezca un menú con una serie de opciones. Al elegir una opción, en la parte de abajo aparecerá el "include" con la página que hemos elegido.

El código es:

Código:

<html>
<head>
<style type="text/css">
.ocultar {display:none}
</style>
<script type="text/javascript">
var leido = null;
function mostrar(num) {
  obj = document.getElementById(num);
  obj.style.display = (obj==leido) ? 'none' : 'block';
  if (leido != null)
    leido.style.display = 'none';
  leido = (obj==leido) ? null : obj;
}
</script>
</head>
<body>
<form name="prueba1">
  <select name="evento">
	<option value="" selected> Selecciona opción...</option>
	<option value="opcion1" onClick="mostrar('uno')"> Opción 1</option>
	<option value="opcion2" onClick="mostrar('dos')"> Opción 2</option>
	<option value="opcion3" onClick="mostrar('tres')"> Opción 3</option>
	<option value="opcion4" onClick="mostrar('cuatro')"> Opción 4</option>
  </select>
</form>

<p class="ocultar" id="uno"><?php include("page1.html")?> </p>
<p class="ocultar" id="dos"><?php include("page2.html")?> </p>
<p class="ocultar" id="tres"><?php include("page3.html")?> </p>
<p class="ocultar" id="cuatro"><?php include("page4.html")?> </p>


</body>
</html>

Mis dudas son:

1. ¿Cómo consigo que me abra la página de la opción seleccionada con el teclado, además de poder seleccionarla con el ratón?

2. Soy bastante novata en javascript, ¿cómo puedo depurar la función para que si pico dos veces en una opción no desaparezca la página de abajo? Es decir, que solo desaparezca si pico en "Selecciona opción" pero que, por ejemplo, aunque pulse dos veces en la opción 1, la página 1 no desaparezca.

No sé si me explico bien... Muchas gracias por vuestra ayuda.

ivangc · #2 (**permalink**) 02/07/2008, 06:25

Deberías utilizar el evento onchange del elemento <select>, esto sería una posible solucion:

Código HTML:

<select id="lista" onchange="mostrar()">
	<option value="nada" selected> Selecciona opción...</option>
	<option value="uno"> Opción 1</option>
	<option value="dos"> Opción 2</option>
	<option value="tres"> Opción 3</option>
	<option value="cuatro"> Opción 4</option>
  </select>

y la funcion :

Código:

function mostrar() {
  var sel = document.getElementById('lista').value;
  if(sel == "nada") return;
  obj = document.getElementById(sel);
  obj.style.display = (obj==leido) ? 'none' : 'block';
  if (leido != null)
    leido.style.display = 'none';
  leido = (obj==leido) ? null : obj;
}

quimfv · #3 (**permalink**) 02/07/2008, 06:34

Otra opcions seria esta

Código HTML:

<html>
<head>
<script type="text/javascript">
function mostrar(num) {
  document.getElementById(document.getElementById(num.id).value).style.display = 'block';
}
function ocultar(num) {
  document.getElementById(document.getElementById(num.id).value).style.display = 'none';
}
</script>
</head>
<body>
<form name="prueba1">
  <select name="evento"  id="evento" onClick="mostrar(this)">
	<option value="" selected> Selecciona opción...</option>
	<option value="uno"> Opción 1</option>
	<option value="dos"> Opción 2</option>
	<option value="tres"> Opción 3</option>
	<option value="cuatro"> Opción 4</option>
  </select>
</form>

<div style="display:none" id="uno">Uno </div>
<div style="display:none" id="dos">Dos </div>
<div style="display:none" id="tres">Tres </div>
<div style="display:none" id="cuatro">Cuatro </div>


</body>
</html>

La variable leido que usas no se como la actualizas, te he puesto la funcion ocultar pero no se desde donde la quieres llamar...

Quim

blumen · #4 (**permalink**) 02/07/2008, 09:36

En primer lugar quiero agradeceros a los dos vuestra rápida contestación.
He probado el "onchange" y es lo que buscaba

pero sigue sin funcionarme la segunda parte, es decir, selecciono la opción 1, aparece; pulso en "Seleccionar opción", no pasa nada; vuelvo a pulsar opción 1 y desaparece la opción. En su lugar, necesitaría que al dejar seleccionada la opción "Selecciona opción", al no ser una opción propiamente dicha, se quedada en blanco.

Otra cosa, la finalidad de esta página es que solo muestre el "include" de la opción que tengo seleccionada, pero tal y como lo hago yo primero te lee y carga todas las páginas y luego te muestra la que quieres. ¿Podría mejorarlo de forma que solo lea y cargue la que seleccione cada vez?

Muchas gracias de nuevo.

ivangc · #5 (**permalink**) 02/07/2008, 11:49

A ver prueba con esto:

Código:

var div;
function mostrar() {
  var sel = document.getElementById('lista').value;
  obj = document.getElementById(sel);

  if(sel == "nada"){
     div.style.display = 'none'
  }
  else{
    div = obj;
    div.style.display =  div.style.display == 'none'? 'block' : 'none';
  }
}

Con respecto a lo que preguntas de si hay mejor forma...si la habría, con AJAX podrías ir obteniendo los contenidos dinamicamente pero no se si te comensará.

blumen · #6 (**permalink**) 03/07/2008, 03:14

Muchas gracias de nuevo

Después de darle vueltas, al final lo de dejar la página en blanco si selecciona la option "Selecciona opción..." lo he resuelto simplemente con:

Cita:

No me compensa meterme con AJAX

tendría que ser con javascript y/o php, pero de momento lo podría dejar como está.

Gracias!