mostrar un div dependiente de un select usando variables
Publicado por Daniel (43 intervenciones) el 26/10/2016 20:20:53
Buenas gente!!
a ver si alguien me echa una mano porque no sé como hacer esto:
tengo montado un código así:
Bien, pues funciona correctamente, según seleccione algo de la lista desplegable, se me muestra el contenido del div correspondiente.
Mi problema es que tengo muchos div, y en cada div, hay un tocho importante de código y por lo tanto, al copiar y pegarlo tantas veces consigo unas bonitas 6000 lineas que se me hacen pesadísimas, da errores y ademas no los encuentro.
Podría simplificar el contenido de cada div usando variables y haría el código único e igual en todos, pero eso hace que tenga que hacerlo también con el select; mi idea es algo así, que por supuesto no funciona:
¿Sugerencias de por qué no funciona? Gracias y saludos
a ver si alguien me echa una mano porque no sé como hacer esto:
tengo montado un código así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<select id="status" name="status" onChange="mostrar(this.value);">
<option selected value="todos">Elige una unidad</option>
<option value="1primA">1ºA PRIMARIA</option>
<option value="1primB">1ºB PRIMARIA</option>
<option value="1primC">1ºC PRIMARIA</option>
</select>
<script type="text/javascript">
function mostrar(id) {
if (id == "todos") {
$("#todos").show();
$("#1primA").hide();
$("#1primB").hide();
$("#1primC").hide();
}if (id == "1primA") {
$("#todos").hide();
$("#1primA").show();
$("#1primB").hide();
$("#1primC").hide();
}if (id == "1primB") {
$("#todos").hide();
$("#1primA").hide();
$("#1primB").show();
$("#1primC").hide();
}if (id == "1primC") {
$("#todos").hide();
$("#1primA").hide();
$("#1primB"). hide();
$("#1primC"). show();
}}</script>
<div id= 'todos' style="display: show;">
</div>
<div id= '1primA' style="display: none;">
</div>
<div id= '1primB' style="display: none;">
</div>
<div id= '1primC' style="display: none;">
</div>
Bien, pues funciona correctamente, según seleccione algo de la lista desplegable, se me muestra el contenido del div correspondiente.
Mi problema es que tengo muchos div, y en cada div, hay un tocho importante de código y por lo tanto, al copiar y pegarlo tantas veces consigo unas bonitas 6000 lineas que se me hacen pesadísimas, da errores y ademas no los encuentro.
Podría simplificar el contenido de cada div usando variables y haría el código único e igual en todos, pero eso hace que tenga que hacerlo también con el select; mi idea es algo así, que por supuesto no funciona:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<form action="prenotas2.php" method="post" name="form2" id="form2">
<select id="status" name="status" onChange="mostrar(this.value);">
<option selected value="todos">Elige una unidad</option>
<option value="1primA">1ºA PRIMARIA</option>
<option value="1primB">1ºB PRIMARIA</option>
<option value="1primC">1ºC PRIMARIA</option>
</select>
<input type="submit">
</form>
<script type="text/javascript">
function mostrar(id) {
if (id == "todos") {
$("#todos").show();
$("#1primA").hide();
$("#1primB").hide();
$("#1primC").hide();
}if (id == "1primA") {
$("#todos").hide();
$("#1primA").show();
$("#1primB").hide();
$("#1primC").hide();
}if (id == "1primB") {
$("#todos").hide();
$("#1primA").hide();
$("#1primB").show();
$("#1primC").hide();
}if (id == "1primC") {
$("#todos").hide();
$("#1primA").hide();
$("#1primB"). hide();
$("#1primC"). show();
}}</script>
<?php
$div= $_POST['status'];
?>
<div id= '<?php echo $div ?>' style="display: none;">
</div>
¿Sugerencias de por qué no funciona? Gracias y saludos
Valora esta pregunta
0
