Foros del Web » Programando para Internet » Javascript »

Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Estas en el tema de Mostrar distribuidores dependiendo de qué pais y provincia seelccione en el foro de Javascript en Foros del Web. Hola. He creado una página para mostrar distribuidores. Lo estoy haciendo con selects. Quiero que sólo aparezca un select para seleccionar país. Una vez selecciono ...
  #1 (permalink)  
Antiguo 22/04/2015, 02:56
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 4 años, 3 meses
Puntos: 4
Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Hola.

He creado una página para mostrar distribuidores.


Lo estoy haciendo con selects.

Quiero que sólo aparezca un select para seleccionar país.
Una vez selecciono el país que aparezca otro select para la provincia.
Una vez selecciono la provincia que me muestre los distribuidores.

De momento consigo hacer el select y el listado de distribuidores con la base de datos, pero me aparece todo a piñón, todo junto.

Este es mi código:

Código:
	<div class="container">
		<div class="center">
			  <select class="select-k"> 
			  <option>Seleccione país</option>
			  		<?php
			$conexion = mysql_connect('localhost', 'root', '');

							mysql_select_db('basededatos', $conexion);

							$tabla = mysql_query("SELECT pais FROM showrooms GROUP BY pais ORDER BY pais ASC "); 

							while ($registro = mysql_fetch_array($tabla)) {
								
								echo '<option value="' . $registro['pais'] . '">' . $registro['pais'] . '</option>';
								

							} 

							mysql_free_result($tabla);

							mysql_close($conexion);
					?>
			</select>
		</div>
		<div class="center">
			  <select class="select-k"> 
			  <option>Seleccione provincia</option>
			  		<?php
					$conexion = mysql_connect('localhost', 'root', '');

							mysql_select_db('basededatos', $conexion);

							$tabla = mysql_query("SELECT provincia FROM showrooms GROUP BY provincia ORDER BY provincia ASC "); 

							while ($registro = mysql_fetch_array($tabla)) {
								
								echo '<option value="' . $registro['provincia'] . '">' . $registro['provincia'] . '</option>';
								

							} 

							mysql_free_result($tabla);

							mysql_close($conexion);
					?>
			</select>
		</div>
		<?php
			$conexion = mysql_connect('localhost', 'root', '');

							mysql_select_db('basededatos', $conexion);

							$tabla = mysql_query("SELECT id, nombre, direccion, ciudad, provincia, pais, postal, telefono FROM showrooms ORDER BY provincia ASC"); 

							while ($registro = mysql_fetch_array($tabla)) {

								echo '<div class="col-50" style="padding:15px 15px;" id="' . $registro['provincia'] . '"><div style="padding:15px; background:#f7f7f7; border: 1px solid #ebebeb;   min-height: 445px;">';
								
								echo '<h2>' . $registro['nombre'] . '</h2>';
								
								echo '<p><strong>Dirección:</strong> ' . $registro['direccion'] . '</p>'; 
						
								echo '<p><strong>Ciudad:</strong> ' . $registro['ciudad'] . '</p>';
								
								echo '<p><strong>Provincia:</strong> ' . $registro['provincia'] . '</p>';
								
								echo '<p><strong>País:</strong> ' . $registro['pais'] . '</p>';
								
								echo '<p><strong>Código postal:</strong> ' . $registro['postal'] . '</p>';
								
								echo '<p><strong>Teléfono:</strong> ' . $registro['telefono'] . '</p>';

								echo '</div></div>';

							} 

							mysql_free_result($tabla);

							mysql_close($conexion);
		?>
	</div>


Agradezco cualquier tipo de ayuda!
  #2 (permalink)  
Antiguo 22/04/2015, 03:02
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 5 años, 10 meses
Puntos: 145
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Muestras un código PHP/SQL y lo publicas en el foro de Javascript. No se si es un planteamiento correcto.

Por cierto, por favor, utiliza el Highlight del foro.

__________________
¿Te sirvió la respuesta? Deja un +1
  #3 (permalink)  
Antiguo 22/04/2015, 03:08
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 4 años, 3 meses
Puntos: 4
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Disculpa, soy nuevo en el foro, todavía no controlo mucho esto.

Es cierto que el código es php y mysql pero he pensado que la solución debe ser en javascript, como he visto en muchos sites. Por este motivo lo he puesto aquí.
  #4 (permalink)  
Antiguo 22/04/2015, 03:16
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 5 años, 10 meses
Puntos: 145
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Entonces quizá lo que busques es algo relacionado con AJAX.
__________________
¿Te sirvió la respuesta? Deja un +1
  #5 (permalink)  
Antiguo 22/04/2015, 03:21
 
Fecha de Ingreso: marzo-2015
Mensajes: 42
Antigüedad: 4 años, 4 meses
Puntos: 2
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Cita:
Iniciado por jorgecanto Ver Mensaje
Disculpa, soy nuevo en el foro, todavía no controlo mucho esto.

Es cierto que el código es php y mysql pero he pensado que la solución debe ser en javascript, como he visto en muchos sites. Por este motivo lo he puesto aquí.
Creo que te refieres al AJAX, que es Javascript. Estás en el foro correcto si es eso de lo que se trata.

No sé la definición exacta, pero el AJAX es un código Javascript que te permite modificar la página web desde el cliente consultando una base de datos a un servidor sin necesidad de recargar la página entera.

¿Es eso lo que buscas?
  #6 (permalink)  
Antiguo 22/04/2015, 03:41
 
Fecha de Ingreso: marzo-2015
Mensajes: 42
Antigüedad: 4 años, 4 meses
Puntos: 2
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Cita:
Iniciado por jorgecanto Ver Mensaje
Quiero que sólo aparezca un select para seleccionar país.
Código HTML:
Ver original
  1. <label>Nacionalidad</label><select class="paises"></select>

Código Javascript:
Ver original
  1. window.onload = function () {
  2.  
  3.     var select_pais = document.getElementsByClassName("paises");
  4.  
  5.     var paises = ["Afganistán", "Akrotiri", "Albania", "Alemania", "Andorra", "Angola", "Anguila", "Antártida", "Antigua y Barbuda", "Antillas Neerlandesas", "Arabia Saudí", "Arctic Ocean", "Argelia", "Argentina", "Armenia", "Aruba", "Ashmore andCartier Islands", "Atlantic Ocean", "Australia", "Austria", "Azerbaiyán", "Bahamas", "Bahráin", "Bangladesh", "Barbados", "Bélgica", "Belice", "Benín", "Bermudas", "Bielorrusia", "Birmania Myanmar", "Bolivia", "Bosnia y Hercegovina", "Botsuana", "Brasil", "Brunéi", "Bulgaria", "Burkina Faso", "Burundi", "Bután", "Cabo Verde", "Camboya", "Camerún", "Canadá", "Chad", "Chile", "China", "Chipre", "Clipperton Island", "Colombia", "Comoras", "Congo", "Coral Sea Islands", "Corea del Norte", "Corea del Sur", "Costa de Marfil", "Costa Rica", "Croacia", "Cuba", "Dhekelia", "Dinamarca", "Dominica", "Ecuador", "Egipto", "El Salvador", "El Vaticano", "Emiratos Árabes Unidos", "Eritrea", "Eslovaquia", "Eslovenia", "España", "Estados Unidos", "Estonia", "Etiopía", "Filipinas", "Finlandia", "Fiyi", "Francia", "Gabón", "Gambia", "Gaza Strip", "Georgia", "Ghana", "Gibraltar", "Granada", "Grecia", "Groenlandia", "Guam", "Guatemala", "Guernsey", "Guinea", "Guinea Ecuatorial", "Guinea-Bissau", "Guyana", "Haití", "Honduras", "Hong Kong", "Hungría", "India", "Indian Ocean", "Indonesia", "Irán", "Iraq", "Irlanda", "Isla Bouvet", "Isla Christmas", "Isla Norfolk", "Islandia", "Islas Caimán", "Islas Cocos", "Islas Cook", "Islas Feroe", "Islas Georgia del Sur y Sandwich del Sur", "Islas Heard y McDonald", "Islas Malvinas", "Islas Marianas del Norte", "IslasMarshall", "Islas Pitcairn", "Islas Salomón", "Islas Turcas y Caicos", "Islas Vírgenes Americanas", "Islas Vírgenes Británicas", "Israel", "Italia", "Jamaica", "Jan Mayen", "Japón", "Jersey", "Jordania", "Kazajistán", "Kenia", "Kirguizistán", "Kiribati", "Kuwait", "Laos", "Lesoto", "Letonia", "Líbano", "Liberia", "Libia", "Liechtenstein", "Lituania", "Luxemburgo", "Macao", "Macedonia", "Madagascar", "Malasia", "Malaui", "Maldivas", "Malí", "Malta", "Man, Isle of", "Marruecos", "Mauricio", "Mauritania", "Mayotte", "México", "Micronesia", "Moldavia", "Mónaco", "Mongolia", "Montserrat", "Mozambique", "Namibia", "Nauru", "Navassa Island", "Nepal", "Nicaragua", "Níger", "Nigeria", "Niue", "Noruega", "Nueva Caledonia", "Nueva Zelanda", "Omán", "Pacific Ocean", "Países Bajos", "Pakistán", "Palaos", "Panamá", "Papúa-Nueva Guinea", "Paracel Islands", "Paraguay", "Perú", "Polinesia Francesa", "Polonia", "Portugal", "Puerto Rico", "Qatar", "Reino Unido", "República Centroafricana", "República Checa", "República Democrática del Congo", "República Dominicana", "Ruanda", "Rumania", "Rusia", "Sáhara Occidental", "Samoa", "Samoa Americana", "San Cristóbal y Nieves", "San Marino", "San Pedro y Miquelón", "San Vicente y las Granadinas", "Santa Helena", "Santa Lucía", "Santo Tomé y Príncipe", "Senegal", "Seychelles", "Sierra Leona", "Singapur", "Siria", "Somalia", "Southern Ocean", "Spratly Islands", "Sri Lanka", "Suazilandia", "Sudáfrica", "Sudán", "Suecia", "Suiza", "Surinam", "Svalbard y Jan Mayen", "Tailandia", "Taiwán", "Tanzania", "Tayikistán", "TerritorioBritánicodel Océano Indico", "Territorios Australes Franceses", "Timor Oriental", "Togo", "Tokelau", "Tonga", "Trinidad y Tobago", "Túnez", "Turkmenistán", "Turquía", "Tuvalu", "Ucrania", "Uganda", "Unión Europea", "Uruguay", "Uzbekistán", "Vanuatu", "Venezuela", "Vietnam", "Wake Island", "Wallis y Futuna", "West Bank", "World", "Yemen", "Yibuti", "Zambia", "Zimbabue"];
  6.  
  7.     for (i = 0; i<select_pais.length; ++i) { //Buscamos todos los select donde se requieran rellenar con países
  8.  
  9.         select_pais[i].innerHTML+="<option value=\"0\" selected=\"selected\">Indicar</option>"; //Escribimos la opción de indicar para hacer que el cliente ejecute el evento onchange
  10.         for (var c = 1; c < paises.length+1; ++c) { //Escribimos...
  11.  
  12.             select_pais[i].innerHTML+="<option value=\""+ c +"\">"+ paises[c-1] +"</option>";
  13.  
  14.         }
  15.  
  16.     }
  17.  
  18. }

Cita:
Una vez selecciono el país que aparezca otro select para la provincia.
Código HTML:
Ver original
  1. <label>Nacionalidad</label><select class="paises" onchange="mostrar_provincia(this.value)"></select><br/> <!--Añadimos el evento onchange-->
  2.  
  3. <label>Provincias</label><select id="provincias" disabled="true"></select> <!--Podemos ocultarlo con un display:none o deshabilitarlo con un disalbed="true"-->

Código Javascript:
Ver original
  1. function mostrar_provincia(valor){
  2.             var xmlhttp; //En esta variable recogeremos nuestra consulta a la base de datos que haremos al servidor
  3.             document.getElementById("provincias").innerHTML="<OPTION>Cargando...</OPTION>";
  4.             if (window.XMLHttpRequest)
  5.                 {// code for IE7+, Firefox, Chrome, Opera, Safari
  6.                 xmlhttp= new XMLHttpRequest();
  7.                 }
  8.             else
  9.                 {// code for IE6, IE5
  10.                 xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
  11.                 }
  12.                  
  13.             function escribir() { //Significa que el servidor ya nos ha respondido
  14.                 if (xmlhttp.readyState===4 && xmlhttp.status===200) // Nos da el visto bueno
  15.                     {
  16.                     document.getElementById(provincias).disabled=false; //Habilitamos el select provincias
  17.                     document.getElementById(provincias).innerHTML=xmlhttp.responseText;
  18.                     }
  19.                 else { // No nos da el visto bueno
  20.                     document.getElementById(provincias).innerHTML="ERROR";
  21.                 }
  22.             }
  23.                
  24.             xmlhttp.onreadystatechange = escribir; //Cuando el servidor nos haya respondido, nos vamos a la función escribir
  25.             xmlhttp.open("POST","http://NombreDeMiOrdenador:8080/MiProyecto/cargar_datos",true); //Es la dirección del servidor donde haremos la consulta
  26.             xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  27.             xmlhttp.send("que_datos=provincias&que_valor="+valor); //Los datos que le pasaremos al servidor
  28.                    
  29.         }

http://NombreDeMiOrdenador:8080/MiProyecto/cargar_datos es el servlet java que tengo que consulta una base de datos de MySQL y te responde con un out.println, pero como veo que usas php, no creo que te sirva...

Última edición por Tusade; 22/04/2015 a las 03:58
  #7 (permalink)  
Antiguo 24/04/2015, 05:03
 
Fecha de Ingreso: abril-2015
Mensajes: 16
Antigüedad: 4 años, 3 meses
Puntos: 4
Respuesta: Mostrar distribuidores dependiendo de qué pais y provincia seelccione

Gracias por la respuesta Tusade. Pero no me sirve, ya que el código html se genera en función de los datos que recoja de la base de datos. Estos datos se modifican dentro del panel de administración.

He depurado el select y he creado menus con enlaces, ya que he visto que la mayoría lo hacen así.

Necesito que dependiendo a qué enlace haga click, se muestre una cosa u otra.

Pongo un ejemplo del código HTML de cómo es mi estructura

Código HTML:
Ver original
  1. <!--[PRIMERO MUESTRO LOS PAÍSES]-->
  2. Seleccione país
  3. <ul>
  4.     <li><a href="#españa">España</a></li>
  5.     <li><a href="#alemania">Alemania</a></li>
  6.     <li><a href="#italia">Italia</a></li>
  7. </ul>
  8. <!--[ESTOS DIVS ESTÁN OCULTOS, LOS MUESTRO EN FUNCIÓN DEL PAÍS QUE SELECCIONO]-->
  9. <div id="españa">
  10. Seleccione provincia/estado
  11. <ul>
  12.     <li><a href="#alicante">Alicante</a></li>
  13.     <li><a href="#madrid">Madrid</a></li>
  14.     <li><a href="#barcelona">Barcelona</a></li>
  15. </ul>
  16. </div>
  17.  
  18. <div id="alemania">
  19. Seleccione provincia/estado
  20. <ul>
  21.     <li><a href="#berlin">Berlin</a></li>
  22.     <li><a href="#munich">Munich</a></li>
  23.     <li><a href="#hamburgo">Hamburgo</a></li>
  24. </ul>
  25. </div>
  26.  
  27. <div id="italia">
  28. Seleccione provincia/estado
  29. <ul>
  30.     <li><a href="#milan">Milan</a></li>
  31.     <li><a href="#roma">Roma</a></li>
  32.     <li><a href="#napoles">Napoles</a></li>
  33. </ul>
  34. </div>
  35.  
  36. <!--[MÁS DIVS OCULTOS, ESTOS LOS MUESTRO EN FUNCIÓN DE LA PROVINCIA QUE SELECCIONE]-->
  37. <div id="alicante"></div>
  38. <div id="barcelona"></div>
  39. <div id="madrid"></div>
  40. <div id="berlin"></div>
  41. <div id="munich"></div>
  42. <div id="hamburgo"></div>
  43. <div id="milan"></div>
  44. <div id="roma"></div>
  45. <div id="napoles"></div>


Necesito el javascript que lo haga funcionar, he probado mil cosas que he encontrado en internet y me da errores.


Gracias!

Etiquetas: dependiendo, pais, php, provincia, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:05.