Filtrar registros con select y options PHP MySQL
Mostrar solo registros elegidos en la lista desplegable (SELECT TAG)
Filtrar registros con select. Si deseamos filtrar datos usando una etiqueta de lista desplegable (SELECT), estas en el lugar correcto porque haremos dos ejemplos: Uno usando HTML5, JavaScript y otro usando PHP y MySQL.
¿Cómo funciona el script?
Básicamente, lo que haremos es ocultar los elementos y lo mostraremos de acuerdo a la selección de la etiqueta SELECT. De esta manera podemos visualizar solamente los registros de una categoría dada en la lista.
Además. Los resultados del filtro lo mostraremos en una lista desordenada (UL LI). Sin embargo, estos filtros también lo podemos guardar en una base de datos según la necesidad del programador.
A) Filtrar registros con select usando HTML5
El método nos permite filtrar solo los elementos que deseamos (según ciertos criterios) y devolverlos en una lista. Pongamos un ejemplo muy sencillo, de la siguiente lista de colores, queremos obtener solamente los colores seleccionados por la lista desplegable.
Ejemplo completo con HTML5
<!DOCTYPE html>
<html>
<head>
<style>
.cb{
display: none; /* Por defecto */
width: 120px;
height: 120px;
margin: 10px;
font-size: 13px;
text-align: center;
border: 1px solid #666;
text-align: center;
}
.color_1{
background-color: white;
}
.color_2{
color: white;
background-color: black;
}
.color_3{
color: white;
background-color: gray;
}
.color_4{
color: white;
background-color: red;
}
.color_5{
background-color: yellow;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select class="form-control" name="nuevo_filtro" id="filtros">
<option value="">Selecciona un color</option>
<option value="1">Blanco</option>
<option value="2">Negro</option>
<option value="3">Gris</option>
<option value="4">Rojo</option>
<option value="5">Amarillo</option>
</select>
<br>
<br>
<div class="cb color_1">Color Blanco</div>
<div class="cb color_2">Color Negro</div>
<div class="cb color_3">Color Gris</div>
<div class="cb color_4">Color Rojo</div>
<div class="cb color_5">Color Amarillo</div>
<script type="text/javascript">
$(function(){
$('#filtros').on('change', function(){
var value = $(this).val();
// Ocultamos todos los contenedores de colores
$('.cb').hide();
// Mostramos el color elegido
$('.color_' + value ).show();
});
});
</script>
</body>
</html>
Ver Demo
B) Filtrar registros con select usando PHP y MySQL
Para realizar este ejemplo tenemos que conectarnos a mysql usando PDO y realizar consultas para poblar la lista desplegable.
Si deseamos usar este ejemplo con Base de datos y lenguaje PHP, aquí les traigo un ejemplo completo.
Es fundamental tener conocimiento de las sentencias SELECT-OPTIONS en este ejercicio usaremos la selección, y de la sentencia SQL para mostrar en la lista.
¿Que necesitamos para este ejemplo?
Tenemos que usar un servidor local o de producción para poder ejecutar este ejemplo. por lo tanto, usaremos una base de datos llamado «sistemas» y dos tablas con nombre: Categorías y Productos.
Además, vamos a poblar de registros esas dos tablas para que funcione el presente ejemplo.
Hay que tener en cuenta que usaremos tablas relacionas por medio de las columnas idc y cat_id para tener ordenado los registros en MySQL
Base de datos y tabla MySQL
CREATE TABLE `categorias` ( `idc` int(11) NOT NULL, `nombre_cat` varchar(200) NOT NULL, `fecha` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp() ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO `categorias` (`idc`, `nombre_cat`, `fecha`) VALUES (1, 'Framework', '2020-12-07 02:37:35'), (2, 'Lenguaje de Programación', '2020-12-07 02:37:35'), (3, 'Base de datos', '2020-12-07 02:37:35'), (4, 'CMS', '2020-12-07 02:37:35'), (5, 'Comercio Electrónico', '2020-12-07 02:38:27'); CREATE TABLE `productos` ( `idp` int(11) NOT NULL, `nombre_pro` varchar(220) NOT NULL, `fecha` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(), `cat_id` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; INSERT INTO `productos` (`idp`, `nombre_pro`, `fecha`, `cat_id`) VALUES (1, 'Laravel', '2020-12-07 02:46:21', 1), (2, 'CodeIgniter ', '2020-12-07 02:46:25', 1), (3, 'CakePHP', '2020-12-07 02:46:28', 1), (4, 'Symfony', '2020-12-07 02:46:30', 1), (5, 'Phalcon', '2020-12-07 02:46:33', 1), (6, 'Zend', '2020-12-07 02:46:36', 1), (7, 'Yii', '2020-12-07 02:46:39', 1), (8, 'PHP', '2020-12-07 02:49:42', 2), (9, 'JAVA', '2020-12-07 02:49:42', 2), (10, 'PYTHON', '2020-12-07 02:49:42', 2), (11, 'C++', '2020-12-07 02:49:42', 2), (12, 'JAVASCRIPT', '2020-12-07 02:49:42', 2), (13, 'C#', '2020-12-07 02:49:42', 2), (14, 'C', '2020-12-07 02:49:42', 2), (15, 'MySQL', '2020-12-07 02:52:31', 3), (16, 'PostgreSQL', '2020-12-07 02:52:31', 3), (17, 'Firebird', '2020-12-07 02:52:31', 3), (18, 'SQLite', '2020-12-07 02:52:31', 3), (19, 'MariaDB ', '2020-12-07 02:52:31', 3), (20, 'Oracle', '2020-12-07 02:52:31', 3), (21, 'WordPress', '2020-12-07 02:54:30', 4), (22, 'Drupal', '2020-12-07 02:54:30', 4), (23, 'Joomla', '2020-12-07 02:54:30', 4), (24, 'Moodle', '2020-12-07 02:54:30', 4), (25, 'Magento', '2020-12-07 02:55:42', 5), (26, 'OpenCart', '2020-12-07 02:55:42', 5), (27, 'PrestaShop', '2020-12-07 02:55:42', 5), (28, 'WooCommerce ', '2020-12-07 02:55:42', 5); ALTER TABLE `categorias` ADD PRIMARY KEY (`idc`); ALTER TABLE `productos` ADD PRIMARY KEY (`idp`), ADD KEY `cat_id` (`cat_id`); ALTER TABLE `categorias` MODIFY `idc` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; ALTER TABLE `productos` MODIFY `idp` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=29; ALTER TABLE `productos` ADD CONSTRAINT `productos_ibfk_1` FOREIGN KEY (`cat_id`) REFERENCES `categorias` (`idc`);
HTML5 con PHP y MySQL
Aquí les dejare el ejemplo completo acerca del funcionamiento del filtro con select.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Filtro por select - Lista desplegable</title>
<style>
.cb{
display: none; /* Por defecto */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
$db = new PDO('mysql:host=localhost;dbname=sistemas', 'root', '');
?>
<?php
$sql = $db->prepare("select * from categorias order by nombre_cat asc");
$sql->execute();
$categorias = $sql->fetchAll();
?>
<select class="form-control" style="height:30px; width:96%;padding:.175rem .25rem" name="categ" id="filtros3">
<option value="">Seleccione Producto...</option>
<?php
foreach ($categorias as $row):?>
<option value="<?php echo $row['idc'];?>"><?php echo $row['nombre_cat'];?> </option>
<?php endforeach; ?>
</select>
<?php
//$categorias = get_categorias();// categorias
$prod = $db->prepare("select * from productos order by nombre_pro asc");
$prod->execute();
$productos = $prod->fetchAll();
if(count($productos)>0):?>
<ul class="list-unstyled">
<?php foreach($productos as $pro):?>
<li class="cb color_<?=$pro["cat_id"]?>" id="cat<?php echo $pro["idp"]?>">
<?php echo $pro["nombre_pro"]."";?>
</li>
<?php endforeach;?>
</ul>
<?php else:?>
<p class="alert alert-danger">No hay resultados</p>
<?php endif;?>
<script type="text/javascript">
$(function(){
/*$('.cb').show();*/
$('#filtros3').on('change', function(){
var value = $(this).val();
var seats = $("#filtros3").val();
if (value == "") {
$('.cb').show();
}else{
// Ocultamos todos los contenedores de colores
$('.cb').hide();
// Mostramos el color elegido
$('.color_' + value ).show();
}
});
});
</script>
</body>
</html>
Si ejecutamos, veremos que en la pantalla de selección aparecen los nombres de las variables que existen en la tabla categorias.
Ver DemoConclusión: Filtrar registros con select
En este artículo hemos aprendido a filtrar resultados usando HTML5 y también con PHP & MySQL
Si tenemos varios productos, podemos filtrarlo usando esta opción
Saludos Nestor,
Quisiera saber si me puedes ayudar a crear un filtro de productos a partir de la ubicación del vendedor..
Cuando se registra el vendedor debe colocar la region en donde tiene su tienda (campo desplegable) y ese dato lo quiero utilizar para filtrar los productos de acuerdo a la región del vendedor..