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 - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (24 votos, promedio: 4,67 de 5)
Cargando…
Comparte en las redes sociales

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

  1. naty dice:

    hola!

    si tengo un select con dos value, es decir nombre como hago para que funcione tu codigo?

  2. carlos dice:

    estimado necesito ponerme en contacto via email , mi email es carlosdeoliv@gmail.com es sobre un proyecto web. gracias

  3. Gonzalo dice:

    Hola, gracias por el aporte, te consulto: en caso que la validación da error y vuelve al formulario, se pierden los valores cargados por ajax, es decir en el ejemplo de autos, el select de modelos que depende de la marca no mantiene solo los modelos de dicha marca como puedo mantener dicha información.
    Desde ya muchas gracias.

  4. CÉSAR GIL dice:

    Buenas Jose tengo un problema a la hora de guardar en base de datos , he utilizado tu código para incluirlo dentro de un formulario , pero a la hora de guardar todo el formulario en la base de datos me guarda el ID no el nombre seleccionado .
    ya no se ni donde me mirar si me pudieras hecha una mano .

    Gracias de antemano y un saludo

  5. John Leon dice:

    Hola Buen Día,
    Pregunta por que no carga en otro navegar, por ejemplo no me corre en Mozilla Firefox

  6. Hector Fernandez dice:

    ¡Excelente ejemplo!
    ¿cómo podría mandar en el segundo select la variable -marca- hacia el tercer select?
    Es decir, para que el archivo colores.php pueda filtrar marca y modelo desde una BD?

    De antemano gracias por tu ayuda y por compartir tu conocimiento.

  7. rachel dice:

    al descargar el rar de combos dependiente, no funciona alguno sabe cual seria la razon?

  8. Mauricio Havliczek dice:

    Este ejemplo esta bueno, sin embargo lo que yo necesito es insertar la informacion de los dos combobox en una Bd, pero al seleccionar el segundo se envia al formulario solo la informacion del segundo y no del primer combobox, como lo hago para enviar la informacion del primer combobox tambien?
    tengo dudas con el codigo javascript.
    Me podrias ayudar lo necesito urgente.

    • Jose Aguilar dice:

      Hola,

      En este caso tan solo tienes que agregar otra variable más para que el archivo php reciba también la información del primer combo. De la misma forma que se hace en el ejemplo con la variable «elegido».

      Saludos

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