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 (26 votos, promedio: 4,69 de 5)
Cargando…
Comparte en las redes sociales

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

  1. Cesar dice:

    Buen día José Aguilar

    Hace un par de semanas atrás implemente lo del combo selector anidado en dos niveles, replicando parte de tu código lo que me fue bastante útil, esto lo cargue dentro de un modal, y mostraba la información en el modal de cada botón que me mostraba un datatable, con el evento data enviaba los datos al modal cargados desde el botón y todo funciono bien, pero me solicitaron que por cada botón se cargara un modal (propio con id) agregando el numero de petición desde el botón, y tuve que cambiar la manera de mostrar la información, agregue la función para recargar los selects de acuerdo a la forma en que lo explicas, mi problema es que en ocasiones carga la función de los selects y en otras no, y es un evento al azar, de 5 carga 1, o 2, o 3, pero nunca carga los 5, si tengo 95 modales, casi la mitad pueden no trabajar, como puedo resolver que la carga de la función del combo selector sea efectiva para todos los modales.

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