Listas desplegables llenadas manualmente con JavaScript y DOM

Hola a todos, hoy veremos un ejemplo simple de llenar una lista desplegable (etiqueta select en html) en forma manual por medio de tres formas, dos con JavaScript (JS) y  una con DOM, no usaremos base de datos.

Listas desplegables llenadas dinámicamente (tag select) 3er. Caso con AJAX

Hoy veremos el tercer y último caso, para llenar dinámicamente una etiqueta select (html), como es con AJAX debes conocerlo o tener al menos la idea de como trabaja, más adelante en futuras entradas haré ejemplos básicos de esta tecnología para entenderlo mejor, para los que ya saben les caerá a pelo y espero les guste.

Listas desplegables llenadas dinámicamente (tag select) 2do. Caso

Empezemos con este caso, como les comenté anteriormente la idea es hacer una sola carga de la página, y se preguntarán y ¿cómo podré ver los datos de la segunda lista sin recargar la página otra vez como en el caso anterior?, pues acá nos ayudaremos de Javascript (JS).

Listas desplegables llenadas dinámicamente (tag select) 1er. Caso

Luego de ver la parte introductoria de este tema, el primer caso es cargar la página en una primera oportunidad para luego de escoger un departamento, se cargue la página nuevamente y tener las provincias para ese departamento, empezaremos primero creando nuestras tablas en mysql (nombre de la base de datos es bd_anidados), este sería el script:

Listas desplegables llenadas dinámicamente (tag select)

Hoy veremos lo que son las listas desplegables (combobox o dropdown listbox o tag select en html) llenados dinámicamente, todo programador web que se inicia en alguna oportunidad se topará con esta pregunta ¿cómo llenar datos en una segunda lista desplegable (etiqueta select en html) de acuerdo a lo escogido en una primera lista?.