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

8 Comentarios ¿Qué opinas tú del tema?

  1. SSH 2017-01-11
  2. JOSE 2016-11-02
  3. Cosme 2016-07-26
  4. Hector 2016-07-01
  5. Jonathan Mejía 2016-05-24
  6. Gilberto 2015-07-24

Dejar un comentario

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