[SOLUCIONADO] Mostrar/ocultar capas con un select

Safren · #1 (**permalink**) 27/02/2013, 06:11

Quiero mostrar/ocultar capas desde un <select>, cada <option> tiene que mostrar una capa y ocultar el resto.

Estoy trabajando en Dreamweaver cs6 y si selecciono un option o su texto (he probado las 2 maneras) el código onclick="MM_showHideLayers('apDiv0','','show','apD iv1','','hide','apDiv2','','hide','apDiv3','','hid e')">

me lo pone dentro de la etiqueta <select> y no funciona.

¿Alguien tiene idea de dónde está el problema?

Gracias

axtm · #2 (**permalink**) 27/02/2013, 08:20

hola,
bueno creo que deberias hacerlo con un onchange y que tienes mal escrito el ultimo 'hid e', pero yo trabajo con la libreria jquery en mis proyectos y ahi te boto el codigo que me parece mas facil.

Codigo js

Código:

<script>
$().ready(function(){
$('#cambiar').change(function(e){
        if($('#cambiar').val()==1){//muestro el div1 y oculto los demas
          $('#apDiv1').show();
          $('#apDiv2').hide();
          $('#apDiv3').hide();
        }else if($('#cambiar').val()==2){//muestro el div2 y oculto los demas
          $('#apDiv2').show();
          $('#apDiv1').hide();
          $('#apDiv3').hide();
        }else{//muestro el div3 y oculto los demas
          $('#apDiv3').show();
          $('#apDiv1').hide();
          $('#apDiv2').hide();
        }
    });
})
</script>

Codigo html

Código:

<select id="cambiar" name="cambiar">
  <option value="1">muestra div1</option>
  <option value="2">muestra div2</option>
  <option value="3">muestra div3</option>
</select>

<div id='apDiv1' style="display: none">...info1...</div>
<div id='apDiv2' style="display: none">...info2...</div>
<div id='apDiv3' style="display: none">...info3...</div>

Espero te sirva, te recomiendo el jquery poruqe podras aprender a usar su potencial y enriquecer tu web eso si debes bajar la libreria [URL]http://jquery.com/download/[/URL]

Saludos

Safren · #3 (**permalink**) 28/02/2013, 03:20

Hola axtm,

He probado lo que me comentabas pero sigue sin funcionar. Te pego el codigo que he puesto a ver si me puedes ayudar a ver el fallo.

En la cabecera entre <head> </head> he puesto:

Cita:

Dentro del <body>:

Cita:

<label for="cambiar">Tipo de contacto</label>
<select id="cambiar" name="cambiar">
<option value="0">Tienda</option>
<option value="1">Prensa/Blogger</option>
<option value="2">Marca</option>
<option value="3">Otro</option>
</select>

axtm · #4 (**permalink**) 28/02/2013, 09:01

hola creo que tue error esta cuando llamas al jquery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
deberia ser:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
porque hice la prueba y me ha funcionado, te envio todo el codigo para que lo pruebes y me avises.

Código:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$().ready(function(){
	$('#cambiar').change(function(e){
		if($('#cambiar').val()==0){//muestro el div1 y oculto los demas
			$('#apDiv0').show();
			$('#apDiv1').hide();
			$('#apDiv2').hide();
			$('#apDiv3').hide();
		}else if($('#cambiar').val()==1){//muestro el div2 y oculto los demas
			$('#apDiv0').hide();
			$('#apDiv1').show();
			$('#apDiv2').hide();
			$('#apDiv3').hide();
		}else if($('#cambiar').val()==2){//muestro el div3 y oculto los demas
			$('#apDiv0').hide();
			$('#apDiv1').hide();
			$('#apDiv2').show();
			$('#apDiv3').hide();
		}else if($('#cambiar').val()==3){//muestro el div3 y oculto los demas
			$('#apDiv0').hide();
			$('#apDiv1').hide();
			$('#apDiv2').hide();
			$('#apDiv3').show();
		}
	});
})
</script>
</head>

<body>
<label for="cambiar">Tipo de contacto</label>
	<select id="cambiar" name="cambiar">
        <option value="0">Tienda</option>
        <option value="1">Prensa/Blogger</option>
        <option value="2">Marca</option>
        <option value="3">Otro</option>
	</select>
    <div id="apDiv0" style="display:none">div0</div>
    <div id="apDiv1" style="display:none">div1</div>
    <div id="apDiv2" style="display:none">div2</div>
    <div id="apDiv3" style="display:none">div3</div>
</body>
</html>

Safren · #5 (**permalink**) 28/02/2013, 11:32

Perfecto axtm!!

Se me pasó. Demasiadas horas mirando la pantalla.

Muchas gracias