JQuery - Mostrar un div al elegir un select

 
Vista:
sin imagen de perfil
Val: 1
Ha aumentado su posición en 8 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

Mostrar un div al elegir un select

Publicado por Rebeca (1 intervención) el 13/06/2018 17:46:47
Tengo poco conocimiento de JQuery, Js pero sí comprendo HTML y CSS, verán tengo una lista desplegable, al elegir un estado (#pais), se activan las opciones de ciudades (#provincias) ahora quiero que al elegir una provincia, salga un mapa que tengo en otro archivo externo, como un iframe. He colocado tres mapas de ejemplo, pero me aparecen todos los iframes en lugar de ocultarse los demás.

Si alguien pudiera ayudarme, les copio el código:


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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="row">
    <div class="col-lg-1 col-md-1"></div>
    <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <form name="f1">
            <select name="pais" onchange="cambia_provincia()">
                <option value="0" selected>Seleccione...</option>
                <option value="1">Tabasco</option>
                <option value="2">Veracruz</option>
                <option value="3">Chiapas</option>
 
            </select>
 
            <select name="provincia">
                <option value="-">-</option>
            </select>
        </form>
        <script>
            //defino una serie de varibles Array para cada país
            var provincias_1=new Array("-","Balancán", "Cárdenas", "Comalcalco", "Cunduacán", "Emiliano Zapata", "Frontera", "Huimanguillo", "Jalpa de Méndez", "La Venta", "Macuspana", "Nacajuca", "Paraíso", "Tacotalpa", "Teapa", "Tecolutilla", "Tenosique", "Villahermosa")
            var provincias_2=new Array("-","Acayucan", "Agua Dulce", "Allende", "Catemaco", "Chinameca", "Coatzacoalcos", "Cosoleacaque", "Jaltipan", "Las Choapas", "Minatitlán", "Nanchital", "San Andrés Tuxtla", "Sayula de Alemán")
            var provincias_3=new Array("-","Palenque","Pichucalco","Playas de Catazajá","Reforma")
 
 
            //función que cambia las provincias del select de provincias en función del país que se haya escogido en el select de país.
            function cambia_provincia(){
                //tomo el valor del select del pais elegido
                var pais
                pais = document.f1.pais[document.f1.pais.selectedIndex].value
                //miro a ver si el pais está definido
                if (pais != 0) {
                    //si estaba definido, entonces coloco las opciones de la provincia correspondiente.
                    //selecciono el array de provincia adecuado
                    mis_provincias=eval("provincias_" + pais)
                    //calculo el numero de provincias
                    num_provincias = mis_provincias.length
                    //marco el número de provincias en el select
                    document.f1.provincia.length = num_provincias
                    //para cada provincia del array, la introduzco en el select
                    for(i=0;i<num_provincias;i++){
                       document.f1.provincia.options[i].value=mis_provincias[i]
                       document.f1.provincia.options[i].text=mis_provincias[i]
                    }
                }else{
                    //si no había provincia seleccionada, elimino las provincias del select
                    document.f1.provincia.length = 1
                    //coloco un guión en la única opción que he dejado
                    document.f1.provincia.options[0].value = "-"
                    document.f1.provincia.options[0].text = "-"
                }
                //marco como seleccionada la opción primera de provincia
                document.f1.provincia.options[0].selected = true
            }
 
                            </script>
 
 
        </div>
        <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12 text-center center-block">
    Aquí debería mostrar información
 
        </div>
        <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12"> <!--Aquí están los mapas que deberían mostrarse según la ciudad elegida-->
        <div id="mapa_1" class="contenido">
        <iframe src="mapas/tabasco/balancan.html" width="400" height="400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border: 0px; text-align: center;"></iframe>
        </div>
        <div id="mapa_2" class="contenido">
        <iframe src="mapas/tabasco/cardenas.html" width="400" height="400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border: 0px; text-align: center;"></iframe>
        </div>
        <div id="mapa_3" class="contenido">
        <iframe src="mapas/tabasco/comalcalco.html" width="400" height="400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border: 0px; text-align: center;"></iframe>
        </div>
    </div>
</div>
 
<div class="col-lg-1 col-md-1"></div>
 
</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder