Select Dinamico de Estados y Municipios con JQuery y Php

Select Dinamico de Estados y Municipios con JQuery y Php

Select Dinamico de Estados y Municipios con JQuery y Php
3 (60%) 4 votos

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.


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

Codigo HTML

El codigo html de los dos combos es el siguiente:

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:

Este codigo va dentro de la funcion ready de JQuery

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!

Select Dinamico de Estados y Municipios con JQuery y Php

Select Dinamico de Estados y Municipios con JQuery y Php
3 (60%) 4 votos

14
Dejar un comentario

avatar
11 Comment threads
3 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
12 Comment authors
ReynoldsDavid Tejeda SantosmacofJonathan Melgozaermi Recent comment authors
  Subscribe  
Notify of
Reynolds
Guest
Reynolds

Para los que les sigue sin funcionar hay que agregar esta linea al principio de todo el documento html

David Tejeda Santos
Guest
David Tejeda Santos

si no les funciona asegúrense que están utilizando el jquery completo debido a que si este esta en una versión slim el ajax no puede ser reconocido.

macof
Guest
macof

utilizen este jquery en el documento donde estan los selects y funcionara.

$(document).ready(function() {
// 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);
});
});
});

ermi
Guest
ermi

muchas gracias

Gustavo
Guest
Gustavo

Muchas gracias, me has salvado!

SSH
Guest
SSH

Gracias, ha resultado muy útil!

JOSE
Guest
JOSE

No logro que me funcione podrias poner el ejemplo funcionando amigo

Cosme
Guest
Cosme

Falto el ejemplo brother.

Hector
Guest
Hector

Tienes el codigo? no me funciona

Jonathan Mejía
Guest
Jonathan Mejía

Gracias amigo buen aporte me fue de mucha ayuda.

Gilberto
Guest
Gilberto

Disculpa, ¿tendrás el código completo?, no logro implementarlo. Saludos!