Selects dependientes con jQuery

Selects dependientes con jQuery

Fecha: 25-Jun-2010 | Autor: .
Guardado en: Desarrollo Web

Este post puede resultar trivial para la mayoría de quienes ya hayan experimentado un poco con jQuery, pero les aseguro que cuando tienes que hacerlo “por primera vez” se torna un poco dificil hacerlo desde cero.

Hoy  explicaré como cargar opciones en un select, dependiendo del valor seleccionado en otro select, además dejaré el código para descargar el ejemplo. Manos a la obra…

Primero que nada una brevísima introducción a qué es jQuery.
jQuery es un framework de JavaScript, que nos simplifica la tarea de trabajar con Ajax (esto es: JavaScript asíncrono y XML, lo que nos permite enviar y recibir datos desde el servidor, sin recargar la página).

De esta forma, jQuery es ideal para este tipo de necesidades, ya que nos permite solicitar el contenido de un select dependiendo de que se haya seleccionado previamente en otro, y además nos simplifica el trabajo con el Ajax.

Necesitaremos 3 archivos: el HTML (que contendrá la llamada al jquery, y 2 selects, uno con datos y otro vacío de momento; el archivo de jquery, que podremos descargar desde la página oficial; y un PHP que generará dinámicamente el contenido del 2º select.

HTML de los selects:

<select name="select1" id="select1">
    <option value="0">Selecciona</option>
    <option value="1">Opcion 1</option>
    <option value="2">Opcion 2</option>
    <option value="3">Opcion 3</option>
    <option value="4">Opcion 4</option>
</select>
 
<select name="select2" id="select2">
 
</select>

Simplemente eso, un select con opciones (que pueden o no venir desde una BBDD), y un segundo select con un id y vacío, dónde cargaremos las opciones luego de que se seleccione una opción del primero.

Código jQuery:


¿Por qué este anuncio?
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
    $(document).ready(function(){
        $("#select1").change(function(event){
            var id = $("#select1").find(':selected').val();
            $("#select2").load('genera-select.php?id='+id);
        });
    });
</script>

La primera línea, incluye el archivo de jQuery.
Luego tenemos una función disparada en el evento change de el elemento con id select1. De modo que al elegir cualquier opción del primer select, se disparará esa función que leerá qué opción está seleccionada con el find(‘:selected’).val() y cargará en el select con id select2 la respuesta de un archivo php al que pasa por get el valor elegido en el primer select.

Entonces finalmente, código del archivo genera-select.php:

<?php
 
    $dbh = mysql_connect("localhost", $user, $pass);
    $db = mysql_select_db($bbdd);
 
    $consulta = "SELECT * from tabla WHERE id_padre = ".$_GET['id'];
    $query = mysql_query($consulta);
    while ($fila = mysql_fetch_array($query)) {
        echo '<option value="'.$fila['id'].'">'.$fila['nombre'].'</option>';
    };
 
?>

Simplemente nos conectamos a la BBDD y hacemos un SELECT a la tabla correspondiente e imprimimos por pantalla (sí, simplemente imprimimos con echo) las distintas filas (opciones) que aparecerán directamente en el segundo select.

La función load() de jQuery se encargará de tomar esa respuesta del PHP e incluirla dentro del select dependiente.

Puedes ver el ejemplo en funcionamiento o descargarte el script.


Si te gustó, comparte:
Y si fue de ayuda, puedes comprarme un café:
...ó la cena si quieres! ;)

Etiquetado como: , , , ,


Gravatar

Marcelo


Desarrollador web, trabajando desde Montevideo, Uruguay para todo el mundo. Me especializo en Diseño web, Maquetación HTML5 & CSS3, jQuery y Programación PHP & MySQL, e intento aprender un poco más cada día.

70 comentarios, participa!

  1. Gastón Acosta Ramas

    26. Jun, 2010

    Me encanto tu ejemplo. me pareció sumamente útil.
    salu2.

  2. Marcelo

    27. Jun, 2010

    Me alegro :)
    Es que mis comienzos en jQuery estuvieron apoyados por un grande en la materia ;)

  3. Asier

    30. Jun, 2010

    Gracias Marcelo!! Solo una cosa. Cuando cambiar el primer combo con las flechas arriba y abajo del teclado, el segundo combo no se actualiza….
    Saludos!!!!

  4. Marcelo

    30. Jun, 2010

    Si lo haces con el teclado, el evento .change() se dispara al “abandonar el campo”… o sea que deberías pulsar TAB luego de elegir (con el teclado) la opción ;)

  5. Martín

    05. Jul, 2010

    Buenísimo! Lo guardo en marcadores porque voy a necesitar algo así. Me viene genial porque lo mio no es el desarrollo, pero tengo que hecharle mano algunas veces y son necesarios posts simples y bien explicados :)

    Saludos!

  6. Marcelo

    05. Jul, 2010

    Genial ;) me alegro que sirvan este tipo de posts, que aunque no logro encontrar tiempo como para hacerlos tan seguidos como me gustaría, por lo menos los que hago puedan servir para algo y para alguien ;)

    Saludos Martín!

  7. daniel

    06. Jul, 2010

    Marcelo excelente tu ejemplo, me funciona bien pero me falla con una consulta es especifico. al seleccionar una opcion (omar.ortiz) falla. Me da una excepcion (Uncaught Syntax error, unrecognized expression: jquery-1.4.2.js:2904) . Sabras el porque de este error?

  8. MpD

    08. Jul, 2010

    Hola daniel genial tu explicacion, estoy empezando a aprender esto del ajax y el php, en caso que quisiera poner mas de 3 selects dependientes que deberia hacer.

    muchas gracias por la atencion

  9. Nikus

    09. Jul, 2010

    Buenas noches Marcelo, excelente ejemplo; te dejo una consulta vos que la tenes re clara con wp, como puedo ejecutar un dentro de una entrada/pagina, sin utilizar algún plugin como Excec-PHP, debido a que dichos plugins activan el “embebido” a todos los usuarios de mi WP y se volvería completamente inseguro.

    Saludos

    P/D: Éxitos el sábado, esperemos que el pulpo este de su lado :P

  10. darksoul

    08. Ago, 2010

    hola bro, genial tu ejemplo en lo personal pues debo ser sincero y decir que estoy comenzando con ajax… bueno lo q me preguntaba es lo siguiente: ¿qué debo hacer para que el segundo select no sea visible mientras no se seleccione una opcion en el primer?
    es decir que sin elegir una opcion en el primer pues el segundo select se mantenga invisible, si se elige una opcion en el primer entonces recíen hacerse visible el segundo… ojala tengas un poquito de tiempo para salvarme de este apuro bro, y gracias de antemano

  11. Reinaldo Duque

    03. Oct, 2010

    Marcelo Excelente ejemplo!! llevaba horas tratando de hacerlo con javascript y php y casi me saco un ojo, con este ejemplo lo solucioné en 20 minutos.

    Muchas gracias desde Colombia, lo voy a agregar a mi delicious: http://www.delicious.com/reinaldodu

  12. Luis E.

    12. Oct, 2010

    Buen ejemplo amigo, solo un problema he seguido varios ejemplos que he visto he internet y hasta ahora no he conseguido uno que me sirva, como haces para tener 4 selects dependientes por ejemplo, Estado> Municipio> Ciudad>colonia a mi me funcionan perfectamente haste el segundo nivel pero desde que quero obtener las ciudades simplemente me muestra vacio el select

  13. Camilo

    20. Oct, 2010

    Excelente… toda una tarde estuve intentando sacar algo así pero nada… gracias marcelo un ejemplo claro y sumamente util.

  14. Marcos

    25. Oct, 2010

    cita: pero les aseguro que cuando tienes que hacerlo “por primera vez” se torna un poco dificil hacerlo desde cero.

    Exacto habia visto otros ejemplos pero me resultaba muy dificil entenderlos pero el tuyo lo entendi muy bien, simple y bien explicado :)

    Gracias!

  15. anonimo

    05. Nov, 2010

    Mira es que marcelo en el archivo php el a la vez que esta agregando los resultados de la base de datos también esta agregando código HTML entonces te puedes ingeniar para crear el select desde ese archivo sin que lo tengas por defecto en el HTML y asi no se te vera la segunda lista.

    en la funcion javascript en vez de llamar a la funcion load de jquery con la segunda lista que para esta ocacion no la tenemos en el HTML, lo puedes hacer con un div, Mejor dicho reemplaza el segundo select que esta en el html por un div y en ese div cargas el select que estas creando desde el archivo php

  16. Christian

    03. Dic, 2010

    Felicitacions exelente ejemplo me ha servido de mucho…. nuevamente gracias…..

  17. Oscar Canchica

    09. Ene, 2011

    Excelente información, super sencillo y rapido de aplicar, ya hacer select dependientes no sera complicación… Gracias por ese aporte!!!

  18. elias

    13. Ene, 2011

    una dudita de noob: ¿el valor q lee el jquery para cambiar las opciones del segundo select, es el value del primer select?

  19. David Martinez

    23. Ene, 2011

    Excelente tu ejemplo marcelo, pero sera que podes subir la base de datos con la que estas trabajando en este tic, es que quiero hacer un ejemplo practico incluyendo variable es C CHAR, para que sea algo mas dinamico, pero pues necesito el escript de la base de datos para complementarlo….. Te agradesco marcelo, muchas gracias !

  20. carlos

    30. Ene, 2011

    hola,
    disculpa que pregunte quiza algo obvio pero no he podido hacer funcionar el script y ya cambie los datos de la conexion pero no obtengo ningun dato en el segundo select
    si puedes ayudarme te lo agradecere
    gracias

  21. Marcelo

    09. Mar, 2011

    Exacto elias! ;)

  22. avali2

    13. Mar, 2011

    Es lo más sencillo que he visto en toda la web para crear selects dependientes..

    Gracias…

  23. Brahyan Maya

    06. Abr, 2011

    Marcelo… Muchas gracias por este aporte… saludos desde Colombia!!!

  24. Angel Atencio

    15. Abr, 2011

    Esta excelente este articulo habia buscado mchos pero nada mejor y mas simple que este!

  25. Armando Gomez

    19. Abr, 2011

    Ha sido muy valioso y reanimante tu aporte. Soy principiante y ya puedes imaginarte como debe uno darse contra el escritorio cuando busca y no encuentra algo entendible.

    Gracias !!!!

  26. Frank Ruiz

    24. Abr, 2011

    Exclente vale, WAO, lo acabo de implementar en mi poral de http://www.facilsalud.com y corre genial. Por ahora solo lo tengo montado emi maquina, pero falta subirlo al servidor, he heho las pruebas y ya lo adapte, a que funcionara con 2 campos de una tabla, en la misma tabla esta la ciuda dy el estado de los inscritos.

  27. Jonathan Juarez

    02. May, 2011

    Como puedo agregarle otro combo a tu ejemplo

  28. Pepe el toro

    23. Jun, 2011

    La pregunta del millón es como hacerlo con 3 o mas combobox

  29. geko

    19. Jul, 2011

    me funciona bien, estoy leyendo los datos del select 1 desde postgres, pero los datos que tienen un espacio generan conflicto por que puede ser??

  30. Onion

    26. Jul, 2011

    Amigo una pregunta como hago para hacerlo sin bd y que los valores seleccionados me lleguen junto con la información suministrada en otros campos a un correo electrónico??…
    no se si me hice entender entodo caso ahi te queda mi correo y mi web…
    ojala puedas ayudarme

  31. Anton Cona

    29. Jul, 2011

    Marcelo, Excelente ejemplo.. Te felicito y muchas gracias por tu ayuda, estoy iniciandome en JQuery y me hiciste la vida mas facil..

  32. Alfonso Cuevas

    03. Ago, 2011

    Hola Marcelo!

    Llegue a tu blog, por la entrada de buenos formularios creo, y de ahi me pase a ver un poco mas, llegue a esta para ver de que forma lo manejas, y es realmente simple y sencillo, creo que lo implementare asi de ahora en adelante! ;P

    Solo queria comentar algo, el archivo php, si se deja de esa forma, es vulnerable a inyeccion sql, por lo que si un usuario “malicioso” hace algo como “genera-select.php?id=-1 union select 1,2,3” podra obtener los datos de la base de datos de manera no legal ;P seria bueno que le agregues unos filtros al ejemplo, por si alguien que no sabe mucho y hace un copy paste, al menos el copy paste va seguro y sin problemas :D

    Gracias por la info aqui, que estes de lo mejor! :D

  33. Briss

    18. Ago, 2011

    Hola!! Gracias x el código… sólo una pregunta no entendí bien lo de los campos que manejas en genera-select.php podrías explicarme x fis jeje

    o solo poner tus campo Por Fa

  34. emmauel

    19. Ago, 2011

    exelente ejemplo, lo mas facil, pero como se hace para poner otro select dependiente de select2?? creo que somo muchos con esa duda o necesidad, Daludos

  35. nena

    25. Ago, 2011

    Lo mismo digo, y además en java……. u_u estoy luchando con eso

  36. Alexander

    13. Sep, 2011

    tienes el scrip sql de la base de datos? hasta ahora no he logrado que se me ejecuten los scripts uso dreamweaver cs3

  37. leonardo

    01. Oct, 2011

    Saludos Marcelo,
    muy útil y sencillo tu blog, lo probé y funcionó muy bien, sin embargo me di cuenta que si hacia una consulta muy grande(5.000 filas), el select encadenado recarga muy lento y despues de esto el script de jquery fallaba, a diferencia que si lo hago con ajax, que me recarga inmediatamente.

    Sabrías que puede estar pasando?

    Muchas gracias por esta info

  38. Frank

    27. Nov, 2011

    excelente aporte

  39. Roy

    05. Ene, 2012

    Saludos Marcelo. A pesar que el post es antiguo, me sirvió de mucho con el tema de jQuery, además lo pude modificar para varios selects.
    Gracias

  40. Ulises Ibrahim

    11. Ene, 2012

    Amigo muchas gracias por compartir este ejemplo me sirvio muchisimo, claro adecuado a mi necesidad pero de lujo!!

  41. vanina

    13. Feb, 2012

    no logro que cargue en el segundo select me tira error en el array, calculo que esta mal hecha la consulta….

  42. karolinkaa

    01. Mar, 2012

    Hola, ojala alguien pueda ayudarme yo tengo dos combos funcionando, el problema ahora es cuando quiero editar los datos de mi formulario, los datos son cargados de la DB y quisiera que me muestre el listado pero seleccionado el dato que capturaron inicialmente en el formulario para que puedan editarlo, si me explico? jeje, de antemano gracias por la ayuda

  43. Oswaldo

    14. Mar, 2012

    Hubiera sido perfecto el ejemplo si hubieras colocado el .SQL

    en lo que puedas… agregalo

  44. alain

    28. Mar, 2012

    porque el codigo que pones aqui es mucho muy diferente al que es descargable, saluds

  45. ana

    30. Mar, 2012

    Hola Marcelo, muy bueno tu aporte… me funciona a la perfeccion, pero quisiera saber como hacer para agregar 2 combos mas..?? es decir q el 3er combo me funcione en base al 2..?? yo agregue otro select vacio abajo y lo llame select 3.. y el script solo le cambie el nombre de select1 por el de select2.. y de las misma forma el del select2 por select3.. tambien cree el otro php q me realiza la busquedad.. pero no me funciona y no sabria xq.. si por favor me pudieras orientar un poco.. gracias

  46. manuel celemin

    21. Jun, 2012

    gracias amigo, excelente aporte

  47. Pimi

    09. Jul, 2012

    GRaaaaaacias!!
    No te imaginas lo que akbas de solucionar

  48. Rigo Hernández

    10. Sep, 2012

    Excelente post me ayudo muchismo, creo que es mucho mas facil de como estaba acostumbrado utilizar ajax con php.

    Gracias.

    Saludos

  49. Juan Pablo

    08. Mar, 2013

    Excelente post, me saco de un apuro definitivamente el método mas simple hasta ahora que he visto hasta ahora.

  50. Gustavo RMA

    16. May, 2013

    Hola, me ha funcionado perfectamente. Gracias

Deja tu opinión