Select dependientes de tres niveles en Ajax

Cómo programar select o combos dependientes con AJAX JQUERY

VIDEO Cómo programar select o combos dependientes con AJAX JQUERY

Combos dependientes de tres niveles usaremos para ello Departamentos, provincias y distritos del Perú desarrollada en PHP, MYSQL, AJAX de Jquery, HTML, etc


Select dependientes de tres niveles en Ajax

Cómo programar select o combos dependientes con AJAX JQUERY

Combos dependientes de tres niveles usaremos para ello Departamentos, provincias y distritos del Perú desarrollada en PHP, MYSQL, AJAX de Jquery, HTML, etc

Vamos a desarrollar una pequeña aplicación web donde llenaremos tres select o combo dinámicos o dependientes; esto quiere decir que cuando hagamos click sobre un elementos del select departamentos inmediatamente se llenara el select provincias con los datos correspondientes  a las provincias del departamento de igual forma con los distritos.

BASE DE DATOS MYSQL 

Debemos tener una BD con tres tablas con mínimo, para este ejemplo tenemos la siguientes tablas

CREATE TABLE `departamentos` (
  `id` int(5) NOT NULL DEFAULT '0',
  `slug` varchar(100) NOT NULL,
  `nombre` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE `distritos` (
  `id` int(11) NOT NULL,
  `slug` varchar(100) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `provincias_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


CREATE TABLE `provincias` (
  `id` int(11) NOT NULL,
  `slug` varchar(100) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `departamentos_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


ALTER TABLE `departamentos`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `distritos`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `provincias`
  ADD PRIMARY KEY (`id`);

En este caso no esta relacionadas porque es un ejemplo simple, en realida para un proyecto web profesional si deben estar relacionadas distritos con provincias y provincias con departamentos.

PROGRAMANDO LA APLICACIÓN 

1.- AGREGANDO RECURSOS 

Aqui vamos a crear un documento html llamado index.html  donde llamaremos a la librería Jquery y los estilos de Bootstrap v4.1, dentro de la etiqueta head.

<script src="jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

2.- CONECTANDOSE A LA BASE DE DATOS

Agregamos una clase de conexión a la base de datos  a la cual llamaremos conexion.php. Recurso que lo podemos encontrar en el siguiente link clase para conectar una base de datos Mysql y métodos de consulta  

La forma de instanciar la clase conexion.php es:

<?php 
require "conexion.php";
$user=new ApptivaDB();
?>

3.- LLenamos el Select departamentos

Declaramos o creamos el select y le agregamos atributos el màs importante es id=departamentos,  y clases para el diseño propias de Bootstrap que le dará un forma o estilo adecuado.

Como se puede notar realizamos una consulta a la tabla departamentos la cual nos retorna todos los registros de la tabla y los almacenamos en formato array en la variable $departamentos. Para poder llenar el select debemos de recorrer el array en este caso usamos foreach, parseamos la etiqueta option con los respectivos valores extraidos del array, como son el id y nombre del departamento.

<select name="departamentos" id="departamentos" class="form-control col-sm-4">
  <?php 
  $departamentos=$user->buscar("departamentos","1");
  foreach($departamentos as $departamento):
   ?>
   <option value="<?php echo $departamento['id'] ?>"><?php echo $departamento['nombre'] ?></option>
  <?php 
  endforeach;
  ?>
</select>

Tambien agregamos los otros dos select de provincias y distritos al body, despues de el select de departamentos., los cuales deben estar vacios, se verán de la siguiente manera:

<select name="provincias" id="provincias" class="form-control col-sm-4"></select>
<select name="distritos" id="distritos" class="form-control col-sm-4"></select>

4.- Agregamos el evento change al select provincias lanzando el método ajax

Ahora vamos a crear nuestro script Jquery que hará todo la magia, el cual extraera el valor del select con el id departamentos y tomará su valor cada vez que detecte un click en un elemento. se lanzará el evento change que será capturado y lanzará a su vez el método ajax propio de Jquery,  enviando una cadena con el id al archivo php llamado ajax_provincias.

El código del script Jquery es el siguiente:

$("#departamentos").change(function(){
	 		var parametros= "id="+$("#departamentos").val();
	 		$.ajax({
                data:  parametros,
                url:   'ajax_provincias.php',
                type:  'post',
                beforeSend: function () { },
                success:  function (response) {                	
                    $("#provincias").html(response);
                },
                error:function(){
                	alert("error")
                }
            });
})

En este archivo ajax_provincias.php

Pregunta si existe el post id si es asi una nueva conexiòn a la base de datos y envia una consulta que extrae todos los registros en la tabla provincias que tengan el mismo valor en el campo departamentos_id al igual que id del post recuperado. Luego se parsea o arma la cadena html a retornar. 

Código ajax_provincias.php

<?php 
if(isset($_POST['id'])):
	require "conexion.php";
	$user=new ApptivaDB();
	$u=$user->buscar("provincias","departamentos_id=".$_POST['id']);
	$html="";
	foreach ($u as $value)
		$html.="<option value='".$value['id']."'>".$value['nombre']."</option>";
	echo $html;	
endif;

En el método success de ajax, llenamos el select provincias con  la cadena html que retorna de la consulta que esta en response.

5.-Agregamos el evento change a el select distritos lanzando el método ajax

De forma similar se implementa para el select distritos 

$("#provincias").change(function(){
	 		var parametros= "id="+$("#provincias").val();
	 		$.ajax({
                data:  parametros,
                url:   'ajax_distritos.php',
                type:  'post',
                beforeSend: function () { },
                success:  function (response) {                	
                    $("#distritos").html(response);
                },
                error:function(){
                	alert("error")
                }
            });
})       

Entonces cada vez que elejimos una provincia se lanza el método ajax realizando una consulta a traves del archivo php ajax_distritos.php

Còdigo de ajax_distritos.php

<?php 
if(isset($_POST['id'])):
	require "conexion.php";
	$user=new ApptivaDB();
	$u=$user->buscar("distritos","provincias_id=".$_POST['id']);
	$html="";
	foreach ($u as $value)
		$html.="<option value='".$value['id']."'>".$value['nombre']."</option>";
	echo $html;	
endif;

De igual forma se llena el select distrito a través de response.

Ahora debemos tener en claro que esta aplicación es básica, no esta controlando el vacio de los select secundarios.

Y podemos deducir que esta app es escalable es decir se puede implementar màs select.

CÓDIGO COMPLETO DOCUMENTO INDEX.HTML.

<?php 
require "conexion.php";
$user=new ApptivaDB();
?>
<!DOCTYPE html>
<html>
<head>
	<title>SELECT DEPENDIENTES DE TRES NIVELES www.apptivaweb.com</title>
	<script src="jquery.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="col-12">
			<h1 class="text-center shadow-lg m-5 p-3">SELECT DINÁMICO DE TRES NIVELES</h1>
		</div>
		<div class="row">
			<select name="departamentos" id="departamentos" class="form-control col-sm-4">
				<?php 
				$departamentos=$user->buscar("departamentos","1");
				foreach($departamentos as $departamento):
					?><option value="<?php echo $departamento['id'] ?>"><?php echo $departamento['nombre'] ?></option><?php
				endforeach;
				?>
			</select>
			<select name="provincias" id="provincias" class="form-control col-sm-4"></select>
			<select name="distritos" id="distritos" class="form-control col-sm-4"></select>
		</div>
	</div>
<script>
	 $(document).ready(function(e){
	 	$("#departamentos").change(function(){
	 		var parametros= "id="+$("#departamentos").val();
	 		$.ajax({
                data:  parametros,
                url:   'ajax_provincias.php',
                type:  'post',
                beforeSend: function () { },
                success:  function (response) {                	
                    $("#provincias").html(response);
                },
                error:function(){
                	alert("error")
                }
            });
	 	})

	 	$("#provincias").change(function(){
	 		var parametros= "id="+$("#provincias").val();
	 		$.ajax({
                data:  parametros,
                url:   'ajax_distritos.php',
                type:  'post',
                beforeSend: function () { },
                success:  function (response) {                	
                    $("#distritos").html(response);
                },
                error:function(){
                	alert("error")
                }
            });
	 	})       
    })
</script>
</body>
</html>

En un futuro cercano implementaremos esta funcionalidad en una app web con Laravel.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Select dependientes de tres niveles en Ajax?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 378 veces | Publicado hace 1 mes

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019