Selects dependientes con jQuery

Fecha: 25-jun-2010 | Autor: Marcelo.
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:

<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ó este post, compártelo:

Relacionado:

Sistema para controlar visualizaciones de Boletines o Newsletter

¿Cómo conectar a una Base de Datos MySQL?

Crear un feed RSS dinámico

A 3 lectores les ha gustado esta entrada.

Loading ...

Etiquetado como: ajax, interactividad, jquery, select, web

Marcelo Ferreiro

Desarrollador web: me especializo en Diseño web, Maquetación xHTML & CSS y Programación PHP & MySQL, e intento aprender un poco más cada día.

45 comentarios, participa!

Gastón Acosta Ramas

26. jun, 2010

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

27. jun, 2010

Me alegro :)
Es que mis comienzos en jQuery estuvieron apoyados por un grande en la materia ;)
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!!!!
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 ;)
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!
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!
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?
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
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
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
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
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
Camilo

20. oct, 2010

Excelente… toda una tarde estuve intentando sacar algo así pero nada… gracias marcelo un ejemplo claro y sumamente util.
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!
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
Christian

03. dic, 2010

Felicitacions exelente ejemplo me ha servido de mucho…. nuevamente gracias…..
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!!!
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?
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 !
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
Marcelo

09. mar, 2011

Exacto elias! ;)
avali2

13. mar, 2011

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

Gracias…
Brahyan Maya

06. abr, 2011

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

15. abr, 2011

Esta excelente este articulo habia buscado mchos pero nada mejor y mas simple que este!
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 !!!!
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.
Jonathan Juarez

02. may, 2011

Como puedo agregarle otro combo a tu ejemplo
Pepe el toro

23. jun, 2011

La pregunta del millón es como hacerlo con 3 o mas combobox
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??
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
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..
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
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
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
nena

25. ago, 2011

Lo mismo digo, y además en java……. u_u estoy luchando con eso
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
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
Frank

27. nov, 2011

excelente aporte
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
Ulises Ibrahim

11. ene, 2012

Amigo muchas gracias por compartir este ejemplo me sirvio muchisimo, claro adecuado a mi necesidad pero de lujo!!
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….
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
Oswaldo

14. mar, 2012

Hubiera sido perfecto el ejemplo si hubieras colocado el .SQL

en lo que puedas… agregalo
alain

28. mar, 2012

porque el codigo que pones aqui es mucho muy diferente al que es descargable, saluds
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

Pixelar.me