Ocultando y mostrando capas con select

karlic0s · #1 (**permalink**) 17/03/2009, 11:24

Hola amigos, tengo un pequeño problema que no logro resolver, os comento:
Tengo un select y quiero que con dicho select se me oculten las capas de esta manera:

<select name="opcion">
<option >Seleccione su opción...</option>
<option>opcion1</option>
<option>opcion2</option>
<option>opcion3</option>
<option>opcion4</option>
</select>

Donde la opción 1 2 3 se muestra una capa y la opcion 4 oculta la capa, logicamente al volver a darle a una de las tres primeras opciones vuelva a mostrar la capa, tengo el siguiente codigo pero no me funciona como esperaba:

Código HTML:

<head>
<script language=javascript>
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";
}
</script>
</head>
<body>
<select onchange="mostrar(this.value)">
<option value="DIV1">opcion1</option>
<option value="DIV1">opcion2</option>
<option value="DIV1">opcion3</option>
<option>opcion4</option>
</select>

<div id="DIV1">Esta es la capa que muestran solo los tres primeros option</div>
</body>

JavierB · #2 (**permalink**) 17/03/2009, 12:58

Hola karlic0s

Ponlo así:

Código javascript:

Ver original<select onchange="document.getElementById('DIV1').style.display=(this.value=='DIV1')?'block':'none'">
<option value="DIV1">opcion1</option>
<option value="DIV1">opcion2</option>
<option value="DIV1">opcion3</option>
<option>opcion4</option>
</select>
<div id="DIV1">Esta es la capa que muestran solo los tres primeros option</div>

Saludos,

karlic0s · #3 (**permalink**) 23/03/2009, 08:15

Gracias JavierB, funcionar funciona, pero al enviar el formulario por metodo post me sale, con las tres primeras opciones, "DIV1" y quiero que me salga opcion1, opcion2... alguna solución para esto?

JavierB · #4 (**permalink**) 23/03/2009, 11:21

Hola de nuevo.

Creo que esto te servirá:

Código javascript:

Ver original<select onchange="document.getElementById('DIV1').style.display=(this.selectedIndex==3)?'none':'block'">
<option value="opcion1">opcion1</option>
<option value="opcion2">opcion2</option>
<option value="opcion3">opcion3</option>
<option>opcion4</option>
</select>

Saludos,