select dinamico de estados y municipios jonathanmelgoza

Select Dinamico de Estados y Municipios con JQuery y Php

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

Clic para valorar esta información
[Total: 0 Promedio: 0]

16 comentarios en “Select Dinamico de Estados y Municipios con JQuery y Php”

  1. 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.

    Responder
  2. 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);
    });
    });
    });

    Responder

Deja un comentario