Seguro que has visto en miles de webs el típico campo “Provincia”, el cual se actualiza cuando el usuario selecciona un país en otro campo select de Países. Es decir, es como si ambos selects estuviesen anidados. Así mismo, si el usuario selecciona Portugal, en el select de País, las opciones del select de Provincia se actualizan con las provincias de Portugal. Me pilláis, ¿verdad?
Esto se suele llevar a cabo mediante Ajax. El proceso sería el siguiente: una función de Javascript se dispararía en el caso de que el usuario seleccionase una opción en el campo País, esa función ejecutaría via Ajax un script de PHP el cual consultaría en base de datos las provincias del país que ha seleccionado el usuario, los datos se devuelven a Javascript y a su vez, se muestran en el DOM de la web.
En este tutorial te mostraremos cómo cargar datos en un select utilizando PHP, MySQL y Ajax, pero en vez de con provincias, lo haremos con categorías y productos, que es mucho más genérico. Estáte atento...
Estructura de la tabla
Tenemos dos tablas, categorías y productos. Antes que nada, poblamos la tabla de categorías, que es la que se va a mostrar en un principio y cuyo contenido no se alterará con las llamadas Ajax. Como he explicado antes, tras picar en el select de categorías, deberán cargarse vía Ajax los productos, a través del script de php llamado getproducts.php.
Categorias
CREATE TABLE IF NOT EXISTS `categories` ( `cat_id` int(11) NOT NULL AUTO_INCREMENT, `cat_name` varchar(20) NOT NULL, PRIMARY KEY (`cat_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; -- -- Dumping data for table `categories` -- INSERT INTO `categories` (`cat_id`, `cat_name`) VALUES (1, 'Samsung'), (2, 'Sony'), (3, 'Motorola'), (4, 'Xiaomi');
Productos
CREATE TABLE IF NOT EXISTS `products` ( `product_id` int(11) NOT NULL AUTO_INCREMENT, `product_name` varchar(50) NOT NULL, `cat_id` int(11) NOT NULL, PRIMARY KEY (`product_id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ; -- -- Dumping data for table `products` -- INSERT INTO `products` (`product_id`, `product_name`, `cat_id`) VALUES (1, 'Samsung Galaxy A9', 1), (2, 'Samsung Galaxy S7', 1), (3, 'Samsung Galaxy S6 edge', 1), (4, 'Xperia Z5 Premium', 2), (5, 'Xperia M5 Dual', 2), (6, 'Xperia C5 uplta', 2), (7, 'Moto G Turbo', 3), (8, 'Moto X Force', 3), (9, 'Redmi 3 Pro', 4), (10, 'Mi 5', 4);
Para este desarrollo necesitaremos los siguientes ficheros:
- config.php
- index.php
- getProducts.php
- jquery-1.11.2.min.js
Estarás un poco perdido con tanto fichero, pero no te preocupes, te mostraremos y explicaremos brevemente el funcionamiento de cada uno de ellos.
Config.php
Fichero que establecerá la conexión con la base de datos a través de la extensión PDO.
$dbhost = 'localhost';
$dbname = 'dbdropdown';
$dbuser = 'root';
$dbpass = '';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
Index.php
Contiene código HTML simple para mostrar el select en el que haremos las operaciones. Los datos se cargarán de la tabla Category, y cuando el usuario seleccione una de estas categorías, se cargarán automáticamente todos los productos a través de una petición Ajax.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading MySQL Records on Drop Down Selection using PHP jQuery</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<style type="text/css">
select{
width:250px;
padding:5px;
border-radius:3px;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>/* jquery code will be here */</script>
</head>
<body>
<div class="container">
<div class="page-header">
<h3>
<select id="getProducts">
<option value="showAll" selected="selected">Show All Products</option>
<?php
require_once 'config.php';
$stmt = $dbcon->prepare('SELECT * FROM categories');
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<option value="<?php echo $cat_id; ?>"><?php echo $cat_name; ?></option>
<?php
}
?>
</select>
</h3>
</div>
<blockquote>Load MySQL Records On Drop Down Selection</blockquote>
<hr />
<div class="" id="display">
<!-- Records will be displayed here -->
</div>
</div>
</body>
</html>Código jQuery/Javascript
Código de jQuery que contiene dos funciones: getAll() y $(“#getProducts”).change(). El propio nombre de las funciones te puede indicar a grosso modo su funcionamiento. La primera obtendrá todos los productos a través de una categoría dada y los mostrará en un div html, y la segunda será la que disparará la petición Ajax.
<script type="text/javascript">
$(document).ready(function()
{
// function to get all records from table
function getAll(){
$.ajax
({
url: 'getproducts.php',
data: 'action=showAll',
cache: false,
success: function(r)
{
$("#display").html(r);
}
});
}
getAll();
// function to get all records from table
// code to get all records from table via select box
$("#getProducts").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax
({
url: 'getproducts.php',
data: dataString,
cache: false,
success: function(r)
{
$("#display").html(r);
}
});
})
// code to get all records from table via select box
});
</script>GetProducts.php
Este será nuestro PHP principal que seleccionará los registros de la tabla Products cuando cualquier categoría se seleccione en index.php
<?php
include('config.php');
$action = $_REQUEST['action'];
if($action=="showAll"){
$stmt=$dbcon->prepare('SELECT product_id, product_name FROM products ORDER BY product_name');
$stmt->execute();
}else{
$stmt=$dbcon->prepare('SELECT product_id, product_name FROM products WHERE cat_id=:cid ORDER BY product_name');
$stmt->execute(array(':cid'=>$action));
}
?>
<div class="row">
<?php
if($stmt->rowCount() > 0){
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="col-xs-3">
<div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><?php echo $product_name; ?></div><br />
</div>
<?php
}
}else{
?>
<div class="col-xs-3">
<div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;"><?php echo $product_name; ?></div><br />
</div>
<?php
}
?>
</div>Fuente: codingcage.com