Mostrar/Ocultar con un Select

[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.