Mostrar/Ocultar con un Select

[sjam7]

Hola, tengo una duda, como podria poner 3 capas que dependiendo de un select se muestre una u otra.

Es decir el select seria algo asi:
Opcion 1
Opcion 2
Opcion 3

DIV 1
DIV 2
DIV 3

Si selecciono Opcion 1 se muestra DIV 1 y asi...gracias anticipadas

[AlvaroG]

Primero necesitás ponerle una función al atributo onchange de la lista (para que llame a la función cuando se cambie la opción seleccionada)

<select onchange="mostrar(this.value)">

Luego, crear los option como siempre:

<option value="1">Opcion1</option>

Por último en el HTML necesitás identificar cada DIV:

<div id="div1">

Y ahora hacés la función javascript, que recibe el valor actual seleccionado y cambia el estilo "display" del div correspondiente:

Código:

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

function mostrar(valor_seleccionado) {
 switch(valor_seleccionado)
 {
  case 1:
   div1.style.display = "block";
   div2.style.display = "none";
   div3.style.display = "none";
   break;
  case 2:
   div1.style.display = "none";
   div2.style.display = "block";
   div3.style.display = "none";
   break;
  case 3:
   div1.style.display = "none";
   div2.style.display = "none";
   div3.style.display = "block";
   break;
 }
}

Esto obviamente se puede hacer más prolijo, por ejemplo guardando cuál fue el último div mostrado para solo ocultar ese, o usar matrices para no tener que especificar todo div por div. Pero si la cantidad de div no es muy alta, te va a servir.


Saludos.

[caricatos]

Hola:

La idea de alvlin está bien, pero si se guarda la capa visible se simplifica bastante:

var actual = "DIV1";
function tag(id) {
return document.getElementById(id);
}

function mostrar(capa) {
tag(actual).style.display = "none";
actual = capa;
tag(actual).style.display = "block";
}

Luego el select practicamente igual:
<select onchange="mostrar(this.value)"...>

En los values yo prefiero poner el id completo (no merece la pena ahorrar en estas cosas...)

Saludos

[sjam7]

y los divs como los pongo de inicio? hidden? se muestran todos y quiero que de entrada solo se muestre el DIV1

aunque los nombres reales son canadas, moderna, santatere

[sjam7]

bueno, si, ya lo consegui, perdon por preguntar antes de intentar

[manchin]

Es posible que ese Select junto con el OnChange() me lleve a mostrar diferentes tipos de campos?

[guachacapepe]

Buenas.

Utilicé el script que sale aquí, pero no me funciona en el navegador Safari. El Safari que tengo es para PC.

¿como lo hago para que funcione también en Safari?

Gracias

[guachacapepe]

Iniciado por guachacapepe

Buenas.

Utilicé el script que sale aquí, pero no me funciona en el navegador Safari. El Safari que tengo es para PC.

¿como lo hago para que funcione también en Safari?

Gracias

Retiro lo dicho, no se por que antes no me funciono pero ahora si. No tomen en cuenta mi comentario anterior.

Gracias.

[caricatos]

Hola:

El tema está resuelto y es viejo, así que voy a cerrarlo.