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

    04. Jul, 2013

    Gracias :/ no funciona con IE9

  2. Luis

    01. Nov, 2013

    Una recomendación, no seria mejor en vez de esto:
    var id = $(“#select1”).find(‘:selected’).val();
    poner solo esto:
    var id = $(“#select1”).val();

    la propiedad val(), del select, es por defecto el valor seleccionado,
    Pero de todas maneras muy buen tuto..¡ (y)

  3. Luis Gonzalez

    18. Nov, 2013

    Por favor me podrían decir cómo sería la base de datos?

  4. Otro Luis

    19. Nov, 2013

    Gracias.
    Me funciona. Pero de vez en cuando, de manera aparentemente aleatoria, falla. El menú dependiente no se rellena y a partir de ahí, hasta que no refresco la página, ya no va.
    Sin embargo, tu ejemplo no falla nunca. ¿qué puede ser?

  5. Adrian

    27. Nov, 2013

    Podrias publicar la base de datos el archivo sql

  6. hillel

    10. Feb, 2014

    Excelente script amigo, me salvaste de una buena!

  7. Miguel

    21. Feb, 2014

    Supongamos que tenemos el siguiente código que actualiza el valor de una lista según el valor que se seleccione de otra, ejemplo: estados según el país que se elija.

    $(document).ready(function(){
    $(“#paises”).change(function(event){
    var id = $(“#paises”).val();
    $(“#estados”).load(‘genera-select.php?id=’+id);
    });
    });

    Ahora supongamos que tenemos por ejemplo: países, estados, municipios, calles. Lo más lógico que se me ocurre sería tener un código como el de arriba por cada dependencia que exista, ejemplo: de países a estados, de estados a municipios y de municipios a calles, en total 3 veces el mismo código.

    Sin embargo al momento de hacer el cargado de las listas “hijo” mediante el evento “load”, no se detecta el evento “Change” de las demás listas inferiores, me explico no se produce un efecto cascada en el que el cambio de una lista superior afecte a las demás inferiores directamente.

    ¿Existe alguna forma de detectar un “load” de algún elemento y posteriormente aplicar el cambio en las demás elementos o listas que dependan de este?

  8. anonimo

    25. Abr, 2014

    oye men y como realizaste la base de datos, yo se hacer base de datos pero en este caso que nombre le pusiste a los campos y cuantos campos hicistes agradeceria tu respesta gracias buen tutorial.

  9. Marcelo

    28. Abr, 2014

    Hola, para los que tienen dudas sobre la base de datos, la misma tiene solamente 3 campos (aunque podría luego ser más compleja o con más datos igualmente relacionados).

    Las columnas son id (id de cada opción/subopción), id_padre (es la que relaciona cuales subopciones corresponden a cada opción del primer select) y por último nombre (que es el nombre de la opción) ;)

  10. Emaiengiou

    22. Jun, 2014

    Buen post! justo lo que buscaba! me sacaste de un aprieto jeje. Muy poca informacion clara asi como lo explicas, gracias.

  11. dani

    25. Jun, 2014

    Excelente! fácil y rápido!! :)

  12. Carlos

    14. Ago, 2014

    y si quisiera pasar 2 variables en esta parte del codigo?

  13. Carlos

    14. Ago, 2014

    $(“#select2”).load(‘genera-select.php?code=’+codprod+’&ubi_t=’+ubi_t);

    hice esta adaptación pero no pasan las variables al codigo que genera mi select por medio de una consulta sql… y necesito que pasen ambas porque una es para hacer el proceso de if y el otro para hacer las consultas y generar el siguiente select

  14. Ramiro

    26. Ago, 2014

    Muy bueno me funciono a la perfección! muchas gracias!

  15. Ng

    02. Sep, 2014

    Hola. Funciona genial. Tengo un problema: al traer textos con acentos o “ñ”, no lee el contenido visible del Select (no sólo carácter sino todo el texto, solo lee el value que es un numero).
    He intentado usar htmlentities pero no sirve. Incluso el reemplazo con str_replace y tampoco.
    Es más, el mismo listado que debiera salir en este Select lo uso en la misma página en otra parte y se lee ok, con acentos y ñ.
    ¿Alguna pista?

  16. Jorge Alejandro Quiroga Cruz

    09. Sep, 2014

    Buenas tardes realice la prueba y no me ha funcionado lo que yo observo es que el script solo se llama al cargar la pagina, no me esta llamando la función al presionar el combo que podrá ser ??

    $(document).ready(function(){
    $(“#select1”).change(function(event){
    var id = $(“#select1”).find(‘:selected’).val();
    $(“#select2”).load(‘genera-select.php?id=’+id);
    });
    });

  17. Luis antonio

    15. Sep, 2014

    una duda si quiero agregar la propiedad value a un input tomando como base tu ejercicio como seria porque tengo algo asi

    echo ‘value=”‘.$fila[‘mensualidad’].'”‘;

    pero solo me imprime el valor de query y no me agrega la propiedad a la etiqueta del input

  18. ariel

    29. Sep, 2014

    maestro!! usted es un capo!

  19. José Hernández

    28. Jun, 2015

    Hermanazo, estuve buscando esto por más de una semana!
    Muchísimas gracias!

  20. Maycol

    22. Dic, 2016

    Excelente! Muy simple de entender, justo lo que andaba buscando. Gracias

Deja tu opinión