[SOLUCIONADO] mostrar un segundo formulario con js

alephs · #1 (**permalink**) 22/03/2015, 22:00

Hola gente, soy nuevo por aquí. Mi nombre es Alexis.

Tengo un formulario select que al cambiar de opción realiza una consulta a una bd
usando jquery y ajax. Recibo un json en el cuerpo del código jquery y quiero formar
un nuevo formulario con esos datos recibidos.
Pongo un ejemplo:
Tengo un select de continentes y al seleccionar Europa recibo un json con diferentes países de Europa, ¿Cómo logro que esos países se muestren a su vez
en el cuerpo de un nuevo formulario select para desplegar, seleccionando por ejemplo Francia, las ciudades de ese país?

Si alguien me puede dar una idea o algún link que hable del tema les agradezco.

Alexis88 · #2 (**permalink**) 22/03/2015, 22:16

Bienvenido a FDW, tocayo.

¿Podrías mostrarnos lo que has avanzado del código? No olvides utilizar el highlight respectivo.

Saludos

alephs · #3 (**permalink**) 23/03/2015, 11:49

Bueno, lo que llevo hecho es lo siguiente:

Código HTML:

Ver original<html>
<!--codigo para crear el select de Continentes-->
 
<!--aquí coloco el script jquery que detallo más abajo-->
</html>

El evento que elegí para que se muestren los países del contiente seleccionado es simplemente clickear
el boton de uno de ellos. Voy a modificar mi ejemplo puesto al principio diciendo que lo único que necesito
es mostrar estos países a modo de select en una "capa 1" y que al seleccionar uno me muestre su población
en una "capa 2".
El json que recibo en la consulta al script php (que se conecta a la base de datos) viene de codificar un array
indizado de arrays asociativos, es decir: $paises[$i] = array('nombre'=> "pais1", 'población' => 'x').

Accediendo al json los puedo mostrar a todos perfectamente en esa "capa 1" a modo de lista pero lo que necesito es
hacer de esos países un select y mostrar en una "capa 2" la población de la opción que se elija.

Mi consulta al script php es:

Código Javascript:

Ver originalfunction enviarConsulta() {
                    
                    $.ajax({
                    type: "GET",
                    dataType: 'json',
                    url: "http://localhost/paises.php",
                    data: {cont: $('input:radio[name=continentes]:checked').val()},
                    success: function(data)
 
                                     {//aquí es donde no se cómo seguir }

Alexis88 · #4 (**permalink**) 23/03/2015, 14:33

Crea un nuevo <select> de esta forma y asígnale una función para cuando cambie su valor (cuando se elija una opción):

Código Javascript:

Ver originalvar select = document.createElement("select");
select.onchange = function(){
    //Muestro el valor seleccionado del <select> en la capa 2
    document.querySelector("#id de la capa 2").innerHTML = this.value;
};

Luego, como recibes un array, recórrelo con un bucle y, en cada iteración, crea una opción:

Código Javascript:

Ver originalvar option = document.createElement("option");

Añádele el nombre del país como texto, la población como valor y la adhiérela al <select>:

Código Javascript:

Ver originaloption.text = nombre del país;
option.value = la población;
select.appendChild(option);

Al finalizar el bucle, adhiere ese nuevo <select> a la capa 1:

Código Javascript:

Ver originaldocument.querySelector("#id de la capa 1").appendChild(select);

Eso es todo. Cuando elijas una opción, su valor se mostrará en la capa 2.

Saludos