Combos dependientes con jQuery, Ajax y PHP

Seguramente has visto en algunas páginas Webs los combos dependientes (selectores) que al seleccionar una opción en el primer combo, te aparecen las opciones relacionadas con este en un segundo combo.

En muchas ocasiones nos vemos en la necesidad de usar estos combos o selectores que se llenen según lo que elegimos en otro combo, como por ejemplo, si tenemos un selector de países y queremos que cuando se elija un país, en otro selector aparezcan las ciudades o estados del país elegido.

Es posible que hayas visto muchos tutoriales y ejemplos sobre esto pero estos son muy difíciles de modificar para conseguir personalizarlo al máximo.

En este artículo vamos a explicar una forma muy sencilla de conseguirlo y que puede servir para cualquier posibilidad y además es muy sencillo de entender y modificar.

Vamos a explicar un ejemplo en el cual vamos a tener marcas de coches anidando con algunas de sus modelos.

En el cuerpo de la página o dentro de la etiqueta <body> creamos el formulario con los 2 selectores de la siguiente forma:

<form class="row" action="" method="post">
    <div class="form-group col-lg-3">
        <label for="marca">Marca</label>
        <select name="marca" id="marca" class="form-control">
            <option value="1">Renault</option>
            <option value="2">Seat</option>
            <option value="3">Peugeot</option>
        </select>
    </div>
    <div class="form-group col-lg-3">
        <label for="modelo">Modelo</label>
        <select name="modelo" id="modelo" class="form-control">
            <option value="1">4</option>
            <option value="2">5</option>
            <option value="3">7</option>
            <option value="4">21</option>
            <option value="5">Scennic</option>
            <option value="6">Traffic</option>
        </select>
    </div>
</form>

Tenemos un selector inicial donde el usuario puede elegir la marca y un segundo selector donde el usuario puede elegir el modelo.

En la cabecera de la página o dentro de la etiqueta <head> se debe incluir la librería jQuery y el script de la llamada al evento:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#marca").on('change', function () {
        $("#marca option:selected").each(function () {
            elegido=$(this).val();
            $.post("modelos.php", { elegido: elegido }, function(data){
                $("#modelo").html(data);
            });			
        });
   });
});
</script>

El código de la llamada al evento se encarga de esperar a que el selector con identificador “marca” sea cambiado para rellenar el segundo selector con los modelos mediante una llamada Ajax.

En este archivo “modelos.php” tan solo hacemos lo siguiente:

<?php
$html = "";
if ($_POST["elegido"]==1) {
	$html = '
	<option value="1">4</option>
	<option value="2">5</option>
	<option value="3">7</option>
	<option value="4">21</option>
	<option value="5">Scennic</option>
	<option value="6">Traffic</option>
	';	
}
if ($_POST["elegido"]==2) {
	$html = '
	<option value="1">Ibiza</option>
	<option value="2">Toledo</option>
	<option value="3">Cordoba</option>
	<option value="4">Arosa</option>
	';	
}
if ($_POST["elegido"]==3) {
	$html = '
	<option value="1">106</option>
	<option value="2">206</option>
	<option value="3">306</option>
	';	
}
echo $html;	
?>

Según la marca elegida retornará unas opciones u otras. Las opciones que retorna el archivo “modelos.php” se establecen en el selector con identificador “modelo”.

La clave del asunto es la llamada mediante AJAX al archivo “modelos.php” que tiene una lista de las opciones de las diferentes marcas y se retorna aquella lista de opciones que represente o sean de la marca escogida.

Como vemos tenemos 2 combos abiertos o a la vista por defecto. Al cambiar la marca, dinámicamente cambian los modelos gracias al código jQuery, Ajax y al archivo “modelos.php” que se encarga de retornar la lista de opciones que toca.

Ver el ejemplo de las marcas y modelos

Ver el ejemplo de los niveles y cursos

Ver ejemplo con categorías y subcategorías en base de datos

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (21 votos, promedio: 4,62 de 5)
Cargando…
Comparte en las redes sociales

84 respuestas a “Combos dependientes con jQuery, Ajax y PHP”

  1. Maru dice:

    Hola! muy bueno tu ejemplo!!!

    Para combos de categorias y subcategorias, en donde estaría el código de modelos.php estoy intentando hacer algo dinámico, ya que las categorias y subcategorias pueden variar, hice algo asi:

    get_object($sql);

    $options=””;
    if ($_POST[“elegido”]==1) {
    $options= ?>’

    <option value="id ?>”>titulo ?>

    pero no logro levantar los datos correspondientes de la subcategoria, me podrías ayudar?

    Desde ya muchas gracias!

  2. Maru dice:

    Hola! muy bueno tu ejemplo!!!

    Para combos de categorias y subcategorias, en donde estaría el código de modelos.php estoy intentando hacer algo dinámico, ya que las categorias y subcategorias pueden variar, hice algo asi:

    <?php

    $conn = new conection();
    $rs = new RecordSet($conn);

    $sql=\"SELECT `subcategoria`.`categoria`, `subcategoria`.`titulo`, `categoria`.`titulo`
    FROM `categoria`, `subcategoria` WHERE `subcategoria`.`categoria` = `categoria`.`id`\";
    $sub = $rs->get_object($sql);

    $options=\"\";
    if ($_POST[\"elegido\"]==1) {
    $options= ?>\’
    <?php
    foreach($sub as $valor){ ?>
    <option value=\"<?php echo $valor->id ?>\"><?php echo $valor->titulo ?></option>
    <?php
    }}?>
    \’ <?php
    }

    echo $options;
    ?>

    pero no logro levantar los datos correspondientes de la subcategoria, me podrías ayudar?

    Desde ya muchas gracias!

    • Fernando Vicente dice:

      Hola, yo uso aprox. Tu codigo con algunas modificaciones, pero no logro que me cargue los datos de un tercer select, todos hacen una consulta a la base de datos, funcionan dos, pero el tercero no =( alguien tiene idea?

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

      });
      });

  3. Jose Aguilar dice:

    Hola Mara buenas tardes,

    A simple vista veo un detalle. Yo al menos probaría de poner el foreach fuera de la variable y hacer echo solo de las opciones.

    dentro del bucle ir concatenado las subcategorias asi:

    Prueba y me comentas

    Saludos,

  4. andres gomez dice:

    te felicito por tu explicacion es lo mejor que he encontrado en la web, pero tengo una pregunta como seria para combos deoendientes de tres niveles?

    ejemplo: pais -> region -> ciudad

    gracias por tu colaboracion de antemano ….

  5. private tours in St.Petersburg dice:

    Usted tiene ciertamente algunas de las opiniones y puntos de vista agradables. http://www.jose-aguilar.com ofrece una nueva mirada a la materia.

  6. jose manuel dice:

    Gracias por tu aporte, el ejemplo es muy claro y funciona perfectamente, pero ahora estoy intentando que los tres combos se carguen a partir de tablas mySQL, en función del valor seleccionado en el combo anterior y no consigo adaptar tu código. Tienes por ahi algún ejemplo o alguna pista.

  7. Kevin dice:

    Antes que nada, gracias por compartir tus conocimientos con todos nosotros. Quiero saber si me puedes despejar una duda y es que la verdad es que me estoy metiendo apenas al mundo de la creacion de una web y no entiendo donde debo de colocar el codigo php. Te agradeceria bastante el que me pudieras decir donde colocarlo.

  8. jose manuel dice:

    Gracias, a partir del ejemplo anterior ya he conseguido alimentar los tres combos a partir de tres tablas y hacer que dependa cada una de la anterior

  9. Israel dice:

    Se agradece por su sencillez.

  10. jose dice:

    hola no puedes poner los archivos de ejemplo para descargarlos, necesito algo parecido tu ejemplo es muy bueno

    gracias

  11. Jorge dice:

    Hola buen aporte, tengo una pregunta, si quiero que esos resultados que me arroja, los quiero insertar en una bd, como podría hacer el proceso.

    Saludos.

  12. Enrique Arróniz dice:

    Muchas gracias por el ejemplo! Me resuelve la vida porque yo necesito hacer post de tan solo dos valores (menu1 y menu2) y no estar consultando la base de datos por la infinidad de categorías que tengo en mi script. Gracias en verdad!

  13. luis dice:

    super bien lo de tus combos dependientes , pero no me funciona creo que son los permisos, que tipo de permisos deben tener modelos.php ? y coches.html ?

    saludos y gracias
    felicidades

    • Jose Aguilar dice:

      No puedo decirte cual es el error pero dudo mucho que sean de permisos. Mas bien, sin ver tu ejemplo diría que no estás cargando bien la librería jQuery. Mira bien eso.

  14. Carlos Andres dice:

    Hola . no podrias pasarme el JQUERY DE ESE EJERICIO . NECESITO GUIARME PORQUE NECESITO ALGO EXACTO PERO PARA LAS CIUDADES

    • Jose Aguilar dice:

      El jquery del ejercicio es simplemente este:


  15. dd dice:

    Par llenar el segundo combo desde una base de datos, ¿bastaría con hacer la consulta respecto a la opción elegida?

    if ($_POST[“elegido”]==1) {
    CONSULTA…..

    //espero que sí :S

  16. DZ dice:

    Hola, te agradecería me compartieras el código en caso de que hayas solucionado el ejercicio haciendo la consulta desde la base de datos, estoy estancado.

    Gracias de antemano!

  17. dd dice:

    Muchas gracias al autor… hacer que las opciones se llenen desde una base de datos está fácil, si a alguien le sirve les dejo como sería utilizando el mismo ejemplo de los autos, junto con el script de mysql.

    https://dl.dropboxusercontent.com/u/16501467/autos.tar.gz

    Nuevamente gracias al autor, me sacaste de un apuro 😀

  18. rafael lule dice:

    Aquí les dejo la solución a lo referente al vaciado desde una Base de Datos, espero les sirva:

    if ($_POST[“elegido”]==1) {
    $var1=”select A1FOLI from casas where STATUSMAS=’A’ order by A1FOLI”;
    $casas= mysql_query ($var1);
    $a = 1;
    while ($fila1 = mysql_fetch_array($casas)){
    echo “”.$fila1[“A1FOLI”].””;
    $a++;
    }

    }

  19. darwin Manchola dice:

    Muchas gracias excelelnte codigo

  20. Gonzalo dice:

    Muy bueno el aporte. gracias!

  21. […] Este artículo va asociado a un artículo anterior en el que explicábamos como realizar combos dependientes con jQuery, Ajax y PHP. […]

  22. Ricardo dice:

    Hola Buenas Tardes una preguntota
    Yo quiero hacer combos dependientes de 7 niveles que se jalen de la base de datos estoy usando cake php como se haría con ese framework

  23. Stuardo López dice:

    Primero, felicitaciones por el orden del código y los buenos ejemplos!!!

    No se que estoy haciendo mal (como debo de ordenar el código), me aparecen los formularios (hasta allí todo bien), pero son estáticos es decir que no cambian (como aquí “Ver el ejemplo de las marcas y modelos”) y abajo este error:

    Undefined index: elegido in C:\wamp\www\prueba\modelos.php on line 47

  24. Stuardo López dice:

    Ya lo resolví, colocando en un archivo aparte, gracias!!! En realidad pase 2 días buscando esto… Gracias por el Aporte nuevamente!!!

  25. Azucena dice:

    Hola, me gustaria hacer este ejemplo pero en una misma pagina, es posible hacer esto, vaya espero obtener respuesta pues este tema es del año pasado pero apenas ando comenzando en esta onda 😀 muchas gracias de ante mano y que excelentes aportaciones!! 😀

  26. Ruben Dario dice:

    Buen aporte

  27. Meiss dice:

    Buen día,
    Gracias por su post, casi no encuentro algo que me sacara de apuros pero tengo una pregunta, cómo hago para que al tener los 3 datos seleccionados de los combobox los consulte en la bd y me traiga la información y me la muestre en forma de tabla dentro del html?. Gracias

  28. Bruno dice:

    Buenas me gustaría saber si hay alguna opción de hacer una petición ajax sobre si misma es decir…tengo un formulario llamado formu.php y dentro de esté se encuentra el cod. html y la recepción de los datos y procesado del formulario… puedo poner en el ajax la llamada a formu.php?¿

    Gracias

  29. federico dice:

    Muy buen ejemplo! después de tanto probar lo pude hacer andar!
    mil gracias!

  30. diego dice:

    hola una consulta yo tengo que insertar los datos de los combos pero cuando estan anidados como este ejemplo en vez de los datos en mi tabla mysql se insertan los valores.como puedo hacer para que me inserte los datos?

  31. juan gomez dice:

    exelente aporte, se ajusta a lo que necesito y con la cantidad de codigo justo para ejecutar el proceso

  32. Martin dice:

    Hola José lo hice andar a todo en una pagina metiendo el proceso.php antes del javascript lo que no puedo capturar es el id modelo al enviar los datos de los select desde un formulario el id marca lo envía correctamente saludos.

  33. maria dice:

    hola, estoy intentando insertar en mi pagina hecha con wordpress 3 combos anidados pero no logro hacerlo y todo el mundo me dice que es complicado. Este codigo en wordpress donde tendria que pegarlo? me serviria en un widget de texto o tendria que pegarlo en el css del tema? me estoy volviendo loca y como podeis comprobar no entiendo mucho del tema… mil gracias de antemano

    • Jose Aguilar dice:

      Hola buenas tardes,

      No, ten en cuenta que este código utiliza php y ajax. En un widget no sería posible. Esto en un WordPress se podría implementar en los archivos php de la plantilla activa.

      Saludos

  34. juan pablo dice:

    hola me fue super util el ejemplo y el codigo, tal cual esta org y planteado, quise adaptarlo a lo que ya tengo , tengo un arch clientes.php donde tengo formulario y en el los selects y me gustaria en el mismo tener el codigo php,quise hacer en el tomar la variable elegido con $_POST[“elegido”] intente reemplazar en el script modelos.php por clientes.php y tomarlo en el pero no pude hacerlo funcionar

  35. jose luis dice:

    Hola realice lo mismo que tu y no me funciona el archivo index lo deje en .php y en .hml y no me funciona el de modelos si lo deje en .php, que me puede estar faltando???

  36. Carlos Torres dice:

    Excelente ejemplo, sencillo y funcional. Congratulations!!

  37. Antonio dice:

    Hola! Jose
    Es de los pocos ejemplos que he podido entender, ya que apenas usas opciones que otros si usan en sus ejemplos.

    Pero tengo una duda! ¿porque en mi caso SI VEO LOS ACENTOS?
    Tenia entendido por otras webs que para que ajax pasara los acentos y otros caracteres raros necesitaba de JSON y tu creaste un codigo al que te atreviste a no usar tal estimada opcion y encima funciona! 😀

    ¿Que puedes contar de esto?

    • Jose Aguilar dice:

      Hola,

      Me parece que tan solo hay que guardar los archivos en utf-8 y tener el meta en la cabecera:

      charset=utf-8

      Saludso

  38. Antonio dice:

    Y hay una parte de tu codigo ‘jquery’ que no termino de entender porque gastas caracteres y es ‘option:selected’ de la linea 5.
    El caso es que como se puede entender sin esa ‘opcion’ funciona igual de bien, pero seguro que tu la pusiste por algo que a mi se me escapa y por eso pregunto.

    gracias

  39. Condor_cani dice:

    EXCELENTE EJEMPLOOOOOOOOOOOOO!!!!
    Justo lo que necesitaba

  40. joselys hernandez dice:

    hola buenos dias, muy bueno la explicacion, tengo una duda. eso lo puedo hacer desde un mismi documento o tengo que hacerlo por separado?

  41. Dinh dice:

    Y como seria si yo lleno el primer combo desde base de datos y quiero que el segundo combo se llene según la opción del primer combo, en este caso reportes de autos, cada auto tiene un numero como la placa, luego se llena el reporte de fallas pero el auto puede tener varios reportes de fallas en un mismo mes o año o semana etc, así que filtro los resultados del combo con group by para que no me muestre los resultados repetidos es decir la misma placa del auto pero con diferentes reportes, y en base a esto (la placa elegida) que me llene en el combo siguiente las fechas de los reportes extraídas de la base de datos para visualizar el mas reciente o el mas viejo según se elija la placa y la fecha

  42. Jorge dice:

    Buenas noches, tengo una duda, necesito realizar un combo dependiente de Ciudades, Municipio y parroquias (Venezuela), pero no se que va dentro de los respectivos .php, eh modificado el script pero no me agarra.

  43. Gonzalo Tomas dice:

    hola
    estoy usando tu código y no logro hacer el cambio automatico en los combos selecciono uno y el otro no hace nada me sale el error de indice indefino “elegido” de donde jalo los datos

  44. george dice:

    buenas noches, necesito una consulta, yo realiza un combo de 3 niveles y funciona bien, pero como hago para cuando busque el registre me traiga los datos de los otros 2 combos? yo utilice el combo de <PHP <?php
    $options="";
    if ($_POST["elegido"]==Amazonas) {
    $options= '
    -Seleccione Un Municipio-
    Alto Orinoco
    Atabapo

    ‘;
    echo $options;
    ?>, necesito que al buscar el registro me lleve todos los datos de los combos

  45. paula dice:

    Hola queria decirte que me sirvió mucho tu ejemplo pero quisiera hacerte una consulta como hago para que aparezcan los resultados de la búsqueda en otra pagina html? se que tengo que poner un boton pero no se como vincularlo con la otra pagina.. muchas gracias por leerlo

  46. Veronica dice:

    Hola José Aguilar,

    Gracias por compartir tu conocimiento con nosotros.
    Me ha sido muy útil.

    Saludos,

  47. Peter dice:

    Hola Jose mi duda es respecto a checkbox ¿se hace de la misma forma?
    Me podrías asesorar en el procedimiento.
    de ante mano muchas gracias por el aporte me a servido de mucho

  48. Armando dice:

    Excelente aporte, poer dime algun ejemplo de como en vez de que se active la lista del combo2, aparzcan una tabla con un texto o un input text

  49. Isaac dice:

    Hola Jose tengo una duda sobre como actuar en los elementos html.

    Por ejemplo, me gustaría que según una determinada opción del primer desplegable el segundo desapareciera o apareciera otro elemento. Entiendo que debo controlarlo desde la función de ajax, pero no se como implementarlo.
    Si me pudieras echar una mano?

    Muchas gracias de antemano. El aporte me ha sido de gran ayuda.

  50. jackocris dice:

    Llevo días tratando de implementar algo igual y no lo he logrado porque son mínimos mis conocimientos, estoy creando una funcion con tu codigo dentro de funtion.php y creo un shortcode para ingresarlo en una pagina de wordpress, pero me desconfigura mi plantilla y no me muestra nada. Elimino las librerias de jquery y me muestra los select pero obviamente no cambian los valores al seleccionar las opciones. Me podrías orientar donde estaría mi error por favor y felicitaciones por tu trabajo.

  51. Cesar dice:

    Tengo una duda sobre el código, no he podido hacerlo funcionar, no se si es solo un archivo modelo.php o son varios archivos?

    Gracias

  52. David Sáez dice:

    Muy bueno… Se puede mejorar pasando la variable que viene por post a la consulta SQL para que quede mas dinámico

  53. Fiorella dice:

    Gracias

  54. Jesus dice:

    Saludos como podría hacer para anidar mas de dos select, que me mostrara algo asi.

    Ejemplo:
    Marca, Modelo y Año.

  55. Antonio dice:

    Mil gracias José

  56. […] Este artículo va asociado a un artículo anterior en el que explicábamos como realizar combos dependientes con jQuery, Ajax y PHP. […]

  57. Olivia dice:

    Muy útil este Post y bien explicado. Se agradece encontrar esta solución

  58. Fer dice:

    Me sirvio de mucho tu ejemplo, gracias amigo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre