mostrar div segun select
Publicado por Alejandro (24 intervenciones) el 09/04/2020 16:45:01
que tal
vereis tengo un problema con una funcion de javascript que se encarga de mostrar y ocultar un div dependiendo de un select. Hay dos opciones en el select con los valores SI y NO, quiero que cuando cargue la pagina este seleccionado en NO y por lo tanto que el div (masElementos) este oculto, despues si selecciono SI aparezca el div abajo y viceversa.
El problema es que no consigo que aparezca el div, lo he intentado todo y nada, igual es una tonteria pero no la veo.
A continuacion os dejo mi codigo
Aqui el html:
Aqui el CSS:
Y aqui el javascript:
Gracias de antemano
vereis tengo un problema con una funcion de javascript que se encarga de mostrar y ocultar un div dependiendo de un select. Hay dos opciones en el select con los valores SI y NO, quiero que cuando cargue la pagina este seleccionado en NO y por lo tanto que el div (masElementos) este oculto, despues si selecciono SI aparezca el div abajo y viceversa.
El problema es que no consigo que aparezca el div, lo he intentado todo y nada, igual es una tonteria pero no la veo.
A continuacion os dejo mi codigo
Aqui el html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class=divsEmpleo>
<label>Prestaciones:</label>
<select name="prestaciones" id="select">
<option value="mostrar">Si</option>
<option selected >No</option>
</select>
<div class="masElementos">
<label>Tipo:</label>
<select name="tipoPrestacion">
<option selected>--No seleccionado--</option>
<option>Prestacion por desempleo</option>
<option>Subsidio por desempleo</option>
<option>Discapacidad</option>
<option>Renta garantizada</option>
<option>Otros</option>
</select>
<label>Descripción:</label><textarea cols="45" name="desPrestacion"></textarea>
</div>
</div>
Aqui el CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.divsEmpleo {
position:absolute; visibility:hidden;vertical-align:baseline;
margin-left:200px;
padding:10px;z-index:0;
}.masElementos{
display:none; position:absolute;vertical-align:baseline;
width:800px; padding:10px;z-index:1;
}Y aqui el javascript:
1
2
3
4
5
6
7
8
9
10
11
12
$('#select').change(function(){
var valorCambiado =$(this).value();
if(valorCambiado == 'mostrar'){
$('.masElementos').css('display','block');
}else{
$('.masElementos').css('display','none');
}});
Gracias de antemano
Valora esta pregunta
0
