Hoy te mostraremos como crear un select dinamico con información precargada de estados y municipios en México, que al seleccionar un estado se carguen en otro combo los municipios asociados a ese estado. Para hacer esto nos apoyaremos en Jquery, php y html, asi mismo para obtener los estados y municipios de mexico cargaremos un archivo con esta informacion que estara disponible mas adelante para tu uso propio.

Lo que haremos..

Como dijimos antes, tendremos 2 select: uno para seleccionar el estado y otro para que, en base a esta seleccion, muestre los municipios asociados a ese estado de la republica mexicana (en este caso).

Haremos uso de Html para los select o combos.

Haremos uso de JQuery para el evento de cambio de seleccion en los combos y llenado de los estados y municipios.

Haremos uso de una archivo PHP con toda la informacion de estados y municipios.

Codigo HTML

El codigo html de los dos combos es el siguiente:

<select id="jmr_contacto_estado"><option>Selecciona tu estado</option></select>
<select id="jmr_contacto_municipio"><option>Selecciona tu municipio</option></select>

Añadiendo JQuery

El código JQuery asociado al llenado de la información de estados y municipios a los combos asi como los eventos de cambio de selección es el siguiente:

// Obtener estados
$.ajax({
type: "POST",
url: "procesar-estados.php",
data: { estados : "Mexico" } 
}).done(function(data){
$("#jmr_contacto_estado").html(data);
});
// Obtener municipios
$("#jmr_contacto_estado").change(function(){
var estado = $("#jmr_contacto_estado option:selected").val();
$.ajax({
type: "POST",
url: "procesar-estados.php",
data: { municipios : estado } 
}).done(function(data){
$("#jmr_contacto_municipio").html(data);
});
});

Este codigo va dentro de la funcion ready de JQuery

$(document).ready(function() {

..

Archivo de Estados y municipios de Mexico

Como puedes ver en el codigo JQuery tenemos una referencia al archivo procesar-estados.php el cual esta cargado con toda la información de estados y municipios de México. También vienen dos métodos que hacen posible el llenado de la información en los select..

Descargar Procesar-estados.php

Eso es todo,

Hasta luego!