sábado, 15 de octubre de 2011

Jquery: Crear Select dinamico estado, municipio y parroquia.

Hace poco una persona solicito en el blog en uno de los comentarios que como se hacia un select Dinamico con estado, municipio y parroquia, esta entrada se la voy a dedicar a ese tema pero como en todo siempre hay varias maneras de manejar un mismo problema, pues esta ves voy a mostrar una solucion !SOLO¡ usando JQUERY, para este ejemplo no voy a usar nada de php ni ajax. Para comenzar debemos tener una lista de estados municipios y parroquias, la cual debe tener un formato parecido al siguiente:

var estados = [{'id_estado':'1','estado':'DISTRITO CAPITAL'},{'id_estado':'2','estado':'AMAZONAS'}];



var municipios = [{'id_municipio':'1','id_estado':'1','municipio':'LIBERTADOR'},{'id_municipio':'2','id_estado':'2','municipio':'ALTO ORINOCO'}];



var parroquias = [{'id_parroquia':'1','id_municipio':'1','id_estado':'1','parroquia':'Parroquia Altagracia'},{'id_parroquia':'2','id_municipio':'1','id_estado':'1','parroquia':'Paroquia Antimano'}]; 


Estes son solamente de ejemplo pero por supuesto que los nuestros van a ser mucho mas largos.

En el siguiente enlace dejo todo lo necesario para empezar, una lista en javascript con estados, municipios y parroquias de venezuela, la estructura html basica,  ademas de la version final:
http://www.box.net/shared/7uktun6uxhbllng6rir9

Ok ahora, ya tenemos la base para empezar, lo primero es crear la lista de estados, donde vamos a usar el array de estados, para crear la lista, lo que vamos a hacer es basicamente alamcenar el html con las opciones de los estados en una variable y despues ponerla como valor del select, para recorrer el array vamos a usar .each, asi quedaria nuestra funcion para los estados:

var sestados = '<option value=""></option>';
$(estados).each(function(i){
   sestados += '<option value="'+this.id_estado+'">'+this.estado+'</option>';
});
$('#estados').html(sestados);


Ahora ya tenemos el select de estados, ahora tenemos que crear el de municipios, para esto tenemos que usar el evento de .change() en el select de estados para que cuando sea modificado creemos el select de municipios, el cual se va a hacer muy parecido al de estados con la unica diferencia que vamos a tener que filtrar el array por estado seleccionado.

Para obtener solo los del estado seleccionado, para ello vamos a usar la funcion jQuery.grep, la cual filtra los elementos de un array que satisfacen la funcion de filtrado, sin afectar el array original. la funcion de filtrado nos pasa dos variables el elemento del array y el indice del array, solamente tenemos que hacer nustra funcion de comprobacion y retornar true o false si cumple o no nuestros parametros.

La funcion quedaria de esta manera:

$('#estados').change(function(){ // evento que al ser modificado el select estados es llamado
    var estado = $('#estados').val(); //obtenemos el estado seleccionado
    var pmunicipios = $.grep(municipios,function(n,i){return (n.id_estado == estado); }); //filtramos por estado
    var smunicipios = '<option value=""></option>'; 
    $(pmunicipios).each(function(i){ //recorremos cada uno de los municipios previamente filtrados
        smunicipios += '<option value="'+this.id_municipio+'">'+this.municipio+'</option>'; //vamos  creando el select
    });
    $('#municipios').html(smunicipios);//el html generado se asigna al select de municipios
});



Ahora vamos a trabajar con con las parroquias las cuales vamos a filtrar por estado y municipio, lo cual se va a hacer de las misma manera que la anterior, con la diferencia que tenemos que cambiar todo lo que dice municipios a parroquias y el filtro ahora va a comprobar que el id_estado se el del estado y el id_municipio sea el del municipio seleccionado.


Este es el resultado final para parroquias:

$('#municipios').change(function(){
    var estado = $('#estados').val();
    var municipio = $('#municipios').val();
    var pparroquias = $.grep(parroquias,function(n,i){return (n.id_estado == estado && n.id_municipio == municipio ); });
    var sparroquias = '<option value=""></option>';
    $(pparroquias).each(function(i){
        sparroquias += '<option value="'+this.id_parroquia+'">'+this.parroquia+'</option>';
    });
    $('#parroquias').html(sparroquias);
});


Este tutorial llega a su final, como abran visto es sumamente sencillo y no necesita mucha explicacion, lo unico que nos resta es que cuando se cambie el estado seleccionado pues borre las parroquias, lo cual se los dejo de tarea :), suerte y espero que les sirva, si tienen una duda publiquenla y si les gusto compartanlo que compartir no cuesta nada.

Nota: hay un pequeño detalle en el array que les paso en el archivo por la codificacion, pero como seguro ustedes generaran sus propios array despues por eso no lo modifique, despues hare uno con ajax y php o codeigniter.

7 comentarios:

  1. Excelente publicación, como puedo anexar una solución que realice en ajax para ayudar a la comunidad y a todas las personas que seguimos tu blog

    ResponderEliminar
  2. si lo que quieres es publicar una entrada sobre como hacerlo en ajax, o algo por el estilo. mandame un correo con el articulo. o sino mandame tu correo y te pongo como autor en el blog para que tu también puedes colaborar escribiendo entradas.

    mi correo es marianoramirez353@gmail.com

    ResponderEliminar
  3. Muy buena publicación, quisiera saber como lo hago si tengo los estados, municipios y parroquias en una base de datos oracle.

    ResponderEliminar
  4. chamo no es por nada pero de verdad te la comiste con eso, estaba buscando otra cosa con jquery y vi este post gracias mi pana =)

    ResponderEliminar
  5. EXcelenteeee gracias!! me gusta tu logito de :Hecho en Venezuela!! Gracais!

    ResponderEliminar
  6. como puede mostrar en un formulario que trae los datos de la bd y se requiere mostrar el valor de la opción seleccionada.

    ResponderEliminar
  7. Gracias por este aporte estuve buscando y lei tu publicacion estoy trabajando en una data donde requiere estos datos y queria hacerlo dinamico pero no sabia como gracias npor el aporte

    ResponderEliminar