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
5 (100%) 1 voto

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:

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
5 (100%) 1 voto

Deja tu comentario

11 Comentarios ¿Qué opinas tú del tema?

  1. ermi
  2. Gustavo
  3. SSH
  4. JOSE
  5. Hector
  6. Gilberto

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Loading Facebook Comments ...