Mostrar distribuidores dependiendo de qué pais y provincia seelccione

jorgecanto · #1 (**permalink**) 22/04/2015, 02:56

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!

NueveReinas · #2 (**permalink**) 22/04/2015, 03:02

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.

jorgecanto · #3 (**permalink**) 22/04/2015, 03:08

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í.

NueveReinas · #4 (**permalink**) 22/04/2015, 03:16

Entonces quizá lo que busques es algo relacionado con AJAX.

Tusade · #5 (**permalink**) 22/04/2015, 03:21

Cita:

Iniciado por jorgecanto

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?

Tusade · #6 (**permalink**) 22/04/2015, 03:41

Cita:

Iniciado por jorgecanto

Quiero que sólo aparezca un select para seleccionar país.

Código HTML:

Ver original<label>Nacionalidad</label><select class="paises"></select>

Código Javascript:

Ver originalwindow.onload = function () {
 
    var select_pais = document.getElementsByClassName("paises");
 
    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"];
 
    for (i = 0; i<select_pais.length; ++i) { //Buscamos todos los select donde se requieran rellenar con países
 
        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
        for (var c = 1; c < paises.length+1; ++c) { //Escribimos...
 
            select_pais[i].innerHTML+="<option value=\""+ c +"\">"+ paises[c-1] +"</option>";
 
        }
 
    }
 
}

Cita:

Una vez selecciono el país que aparezca otro select para la provincia.

Código HTML:

Ver original<label>Nacionalidad</label><select class="paises" onchange="mostrar_provincia(this.value)"></select><br/> <!--Añadimos el evento onchange-->
 
<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 originalfunction mostrar_provincia(valor){ 
            var xmlhttp; //En esta variable recogeremos nuestra consulta a la base de datos que haremos al servidor
            document.getElementById("provincias").innerHTML="<OPTION>Cargando...</OPTION>";
            if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp= new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                  
            function escribir() { //Significa que el servidor ya nos ha respondido
                if (xmlhttp.readyState===4 && xmlhttp.status===200) // Nos da el visto bueno
                    {
                    document.getElementById(provincias).disabled=false; //Habilitamos el select provincias
                    document.getElementById(provincias).innerHTML=xmlhttp.responseText;
                    }
                else { // No nos da el visto bueno
                    document.getElementById(provincias).innerHTML="ERROR";
                }
            }
                
            xmlhttp.onreadystatechange = escribir; //Cuando el servidor nos haya respondido, nos vamos a la función escribir
            xmlhttp.open("POST","http://NombreDeMiOrdenador:8080/MiProyecto/cargar_datos",true); //Es la dirección del servidor donde haremos la consulta
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.send("que_datos=provincias&que_valor="+valor); //Los datos que le pasaremos al servidor
                    
        }

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...

jorgecanto · #7 (**permalink**) 24/04/2015, 05:03

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<!--[PRIMERO MUESTRO LOS PAÍSES]-->
Seleccione país
<ul>
    <li><a href="#españa">España</a></li>
    <li><a href="#alemania">Alemania</a></li>
    <li><a href="#italia">Italia</a></li>
</ul>
<!--[ESTOS DIVS ESTÁN OCULTOS, LOS MUESTRO EN FUNCIÓN DEL PAÍS QUE SELECCIONO]-->
<div id="españa">
Seleccione provincia/estado
<ul>
    <li><a href="#alicante">Alicante</a></li>
    <li><a href="#madrid">Madrid</a></li>
    <li><a href="#barcelona">Barcelona</a></li>
</ul>
</div>
 
<div id="alemania">
Seleccione provincia/estado
<ul>
    <li><a href="#berlin">Berlin</a></li>
    <li><a href="#munich">Munich</a></li>
    <li><a href="#hamburgo">Hamburgo</a></li>
</ul>
</div>
 
<div id="italia">
Seleccione provincia/estado
<ul>
    <li><a href="#milan">Milan</a></li>
    <li><a href="#roma">Roma</a></li>
    <li><a href="#napoles">Napoles</a></li>
</ul>
</div>
 
<!--[MÁS DIVS OCULTOS, ESTOS LOS MUESTRO EN FUNCIÓN DE LA PROVINCIA QUE SELECCIONE]-->
<div id="alicante"></div>
<div id="barcelona"></div>
<div id="madrid"></div>
<div id="berlin"></div>
<div id="munich"></div>
<div id="hamburgo"></div>
<div id="milan"></div>
<div id="roma"></div>
<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!