COMBOBOX O SELECT DINÁMICOS CON JAVA SCRIPT

SELECT DINÁMICOS CON JAVA SCRIPT

En esta oportunidad les presentare un articulo sobre una tarea que desarrolle, la verdad si fue difícil, por la poca experiencia que tenia trabajando con java script.

Les dejo un vídeo del funcionamiento del ejercicio.

La tarea trataba sobre SELECT dinámicos, por medio de java script, al inicio pensé que no era algo tan difícil pues solo son select.

Peeero.!! 😁 Cuando no se tiene mucha experiencia o se a dejado de practicar pues si que te pierdes un poco.

LA TAREA DECÍA ALGO ASÍ:

Crear un un formulario que solicite, información sobre los países centroamericanos.

 📌nombre de País

 📌Capital

 📌Moneda

📌Extensión

📌Población. 

Los primeros tres campos deben estar en un campo de tipo select, cuanto se elija el nombre del pais, que AUTOMÁTICAMENTE o por arte de magia 😎 se auto rellene los campos de capital y moneda.😕😌

Bueno la cosa se puede complicar un poco mas de lo que se piensa.

Vale aclarar que las campos de extensión y población están vacíos para que el usuario los rellene, sinceramente no se por que, pues se pueden auto rellenar ya que estamos en este tema. Pero la tarea así lo establecía. 

Luego tenemos un botón que seria para guardar los datos en una base de datos. 

Aclaro, es solo de ejemplo el objetivo se centra en los select. 

DESCRIPCIÓN DEL DESARROLLO DEL EJERCICIO

LES MUESTRO EL INDEX EN HTML COMO QUEDARÍA

index parte 1

index parte 2

En el index lo que hice, para las fonts las enlace de manera externa desde google fonts, y el encabezado general de html, luego cree un header el cual es el encabezado de la plantilla.

Luego cree un div que es el container, donde almacenare el formulario. En dicho formulario los campos label y input están dentro de un div de manera individual esto es para acomodarlos de mejor manera.

Dentro del formulario esta el campo select con todos los option, se debe prestar atension pues en este campo es donde se invoca la funcion "Cambiar_pais".

Muy importante a cada input asignarle un id que es con lo que java script trabaja los campos html.

En la parte inferior pongo la importe los archivos de java script necesarios para que nuestro formulario funcione.

Y ACÁ LES MUESTRO COMO DESARROLLE EL CÓDIGO JAVA SCRIPT

Codigo java script parte1

Codigo java script parte2

Para el codigo de js, creamos una funcion llamada "cambiar_pais" y les pasamos tres parametros s1, s2, s3.

Creamos estas tres variables y...

Acá es donde esta lo cuestionable de este ejercicio... pues a mi propio criterio mal utilice el if repitiendo código, pero de verdad no supe como hacer un array y que con un solo if y un elseif   luego un ciclo for recorriera todos los datos del array, y eligiera dependiendo de lo que aya elegido en el primer select según yo eso seria lo mas ordenado desde un punto de vista de programación.
De alguna manera me las arrelge. 

lo que hice fue lo siguiente.

Cree un if e iguale el valor de la variable s1.value el value es para que tome el valor ejelijo en el select 1. 

Y si el valor coincide al asignado en el javascript le asigne el valor del primer pais de centro america, para este caso Belice, luego en el mismo if cree unas variables con un  array con los datos de la capital y la moneda.

Si el valor elegido en el primer select es Belice, pues elije los valores asignados en el array. 

Luego para seguir condicionando lo hice con un else if a los cuales se reinicia la variable s1 para el valor del segundo país de centro américa en este caso Guatemala, y se crea unas variables almacenando un array con los datos de la capital y la moneda de ese país, y así para los demas países de centro américa.

En la parte inferior para recorrer el valor de los array echos en cada else if, cree dos  ciclo for, que recorra los datos almacenados uno para capital y otro para moneda y si coincide pues que los asigne a las variables s2 y s3 que creamos al inicio de el archivo y que representan los input de capital y moneda respectivamente.

Y básicamente ese es el funcionamiento del ejercicio.

 😎...

Lo dicho antes gente, abra una y mil formas de hacer lo mismo y de mejor forma. Pero en se momento fue lo que puede hacer y lo mas importante lo que salvo mi nota.

Muchas veces como estudiante nos vemos obligados a pensar con rapidez por el tiempo es muy corto, o la tarea es compleja, por lo que sea, si logras desarrollar la tarea y no quedas convencido al 100... luego podrás retomar el reto y hacerlo mucho mejor.

Espero que a mas de uno les sirva para salvar su nota también.

Gracias por su tiempo gente.!!!

hasta pronto.

LINK DE DESCARGA

Pass: madesweb

Si este articulo te a sido de utilidad recuerda compartir en redes sociales, y dar like a nuestra pagina de facebook.