Empieza ahora

Esta librería está actualizada hasta la fecha 27 de Marzo del 2022, cuenta con 214 Paises, 1998 Estados y 129191 Ciudades, es una gran base de datos, completa para poder incorporar en cualquier web.

PRUEBAS

Selecciona libremente cualquier país, estado o ciudad, verás que dependiendo de la selección los otros campos cambiarán.

El código anterior corresponde a:

HTML

Javascript

Explicación

En el código HTML se estructuran divs y textos para la estética del programa, se incorpora una imágen que será la que representará la bandera, tiene como id "flag" y se incorporan 3 selects sin opciones con los ides en "paises", "estados" y "ciudades", de está manera se puede controlar y capturar el correspondiente valor para cada select, además "paises" y "estados" tienen un evento onchange que ejecutará a las funciones correspondientes para actualizar el estado de los componentes anteriormente descritos, en el caso de "paises" son las funciones actualizarEstados();actualizarCiudades();actualizarBandera() y en el caso de "estados" es la función actualizarCiudades().

En el código JS se describe la parte lógica de cada función, para actualizar los campos de bandera, paises, estados y ciudades, se hace uso de $optionPaises() qué es una función propia de la librería sites.js, lo que hace es retornar un modelo HTML con los elementos de los paises encapsulados en elementos option, para poder establecer el cuerpo del elemento select correspondiente para representar a los paises. también se hace uso de la función $optionEstados(pais) qué cumple una función similar a la de $optionPaises() pero con referencia a los estados, recibe de argumento un país para generar los estados correspondientes, y la función $optionCiudades(pais, estado) es similar, pero con referencia a las ciudades, recibe un país y un estado para poder retornar las ciudades correspondientes.

Listo, como ven generar este efecto no es complicado, de hecho es bastante sencillo haciendo uso de la librería sites.js, hay que explicar otras funciones de la librería:

Funciones

Funciones de retorno de cuerpos html

Función	Descripción
$optionPaises()	Retorna un cuerpo HTML con todos los paises de la librería.
$optionEstados(pais)	Retorna un cuerpo HTML con todos los estados de un país especifíco de la librería.
$optionCiudades(pais, estado)	Retorna un cuerpo HTML con todas las ciudades del estado de un país especifíco de la librería.

Funciones de retorno de arreglos

Función	Descripción
$paises()	Retorna el listado de todos los paises en un array organizados alfabeticamente.
$estados(pais)	Retorna el listado de todos los estados de un país en un array organizados alfabeticamente.
$ciudades(pais, estado)	Retorna el listado de todas las ciudades de un país y un estado especifíco en un array organizados alfabeticamente.