PHP Ejemplos

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>
[button color=”primary” size=”medium” link=”https://www.baulphp.com/Ejemplos/filtrar-select/” icon=”” target=”true” nofollow=”true”]Ver Demo[/button]

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.

[button color=”primary” size=”medium” link=”https://www.baulphp.com/EjemplosPHP/filtrar-select-php-mysql/” icon=”” target=”true” nofollow=”false”]Ver Demo[/button]

Conclusió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

Descarga 156 Sistemas PHP & MySQL

¿Te gusto el artículo? Puedes apoyarme invitándome un Café

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba