Mostrar distribuidores dependiendo de qué pais y provincia seelccione

[Tusade]

Iniciado por jorgecanto

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

Código HTML:

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

Código Javascript:

window.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>";
 
        }
 
    }
 
}
 

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

Código HTML:

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

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