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 hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

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

13
Dejar un comentario

avatar
10 Comment threads
3 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
11 Comment authors
David Tejeda SantosmacofJonathan MelgozaermiGustavo Recent comment authors
  Subscribe  
Notify of
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!