Mostrar datos y mapa al elegir un SELECT
Publicado por Rebeca (3 intervenciones) el 06/06/2018 20:36:18
¡Hola! No sé mucho de Javascript o PHP, solo HTML y CSS hasta el momento (que digamos que voy sobre la marcha) ya he usado algunos scripts pero sigo tutoriales...
Ahora tengo este dilema, tengo una página que estoy rediseñando y hasta el momento, las cuestiones que no he podido hacer, en su mayoría las he resuelto agregando algún iframe que ya usaba la página anterior y solo reenlazandolo (están en un sitio externo). Ahora me encuentro con este dilema.
La empresa tiene sucursales, en las que en el sitio anterior interactuabas de la siguiente manera:
Te pedía elegir un estado, una vez seleccionando el estado (Tabasco, Chiapas, Veracruz) se activan los municipios o localidades del estado (Tabasco>Villahermosa, Comalcalco, etc) y al seleccionar el municipio (Villahermosa) se muestran todas las sucursales en ese municipio (Av. México, Bosques de Saloya, Ceracom, etc) los cuales tienen un link al mapa de google con la ubicación (enlace que no se muestra hasta que tu presionas "Ver mapa" y actualmente tiene errores en la API). Yo he intentado copiar el código, pero está en PHP y no le entiendo al 100%, he intentado convertir a PHP pero me marca errores después de un rato, por lo que no me gustaría cambiar los archivos a php a menos que fuera absolutamente necesario. De igual manera he quitado el codigo del estilo para poner como si fuera un iframe pero me desconfigura la página.
¿Alguien que pueda auxiliarme?
Este es el link que necesito lograr: http://www.laboratorioschontalpa.com.mx/localizar_sucursal
Y este es el código que estoy haciendo (no tiene estilos, esos los tengo aparte)
pero es lo que tengo en el html:
Ahora tengo este dilema, tengo una página que estoy rediseñando y hasta el momento, las cuestiones que no he podido hacer, en su mayoría las he resuelto agregando algún iframe que ya usaba la página anterior y solo reenlazandolo (están en un sitio externo). Ahora me encuentro con este dilema.
La empresa tiene sucursales, en las que en el sitio anterior interactuabas de la siguiente manera:
Te pedía elegir un estado, una vez seleccionando el estado (Tabasco, Chiapas, Veracruz) se activan los municipios o localidades del estado (Tabasco>Villahermosa, Comalcalco, etc) y al seleccionar el municipio (Villahermosa) se muestran todas las sucursales en ese municipio (Av. México, Bosques de Saloya, Ceracom, etc) los cuales tienen un link al mapa de google con la ubicación (enlace que no se muestra hasta que tu presionas "Ver mapa" y actualmente tiene errores en la API). Yo he intentado copiar el código, pero está en PHP y no le entiendo al 100%, he intentado convertir a PHP pero me marca errores después de un rato, por lo que no me gustaría cambiar los archivos a php a menos que fuera absolutamente necesario. De igual manera he quitado el codigo del estilo para poner como si fuera un iframe pero me desconfigura la página.
¿Alguien que pueda auxiliarme?
Este es el link que necesito lograr: http://www.laboratorioschontalpa.com.mx/localizar_sucursal
Y este es el código que estoy haciendo (no tiene estilos, esos los tengo aparte)
pero es lo que tengo en 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
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
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--etiquetas funcionamiento--><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laboratorios Chontalpa :: Contacto</title>
<link href="css/estilo.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fuentes.css" type="text/css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"
<div>
<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>
</div>
<script>
//defino una serie de variables 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 selectfor(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 selectdocument.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 id="showsucursales">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-6 col-xs-12" id="datosucursal">
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="showmapa">
</div>
</div>
</div>
</body>
</html>
Valora esta pregunta
0
