Hoy vamos a aprender a procesar select múltiple con foreach PHP. Usaremos el ciclo foreach para devolver los valores de la etiqueta SELECT múltiple y también insertar a MySQL.
Gestionar select múltiple con foreach PHP
A continuación, veremos los pasos a desarrollar y usaremos los siguientes recursos
- Lenguaje HTML
- PHP para procesar los valores
- Plugin de jQuery SELECT2
- jQuery para dinamizar los datos
Etiqueta SELECT Múltiple
Dentro del atributo name al nombre agregaremos corchetes de esta manera name="animales" a esto name="animales[]", Veamos un ejemplo de implementación.
<select class="form-control basico" multiple="multiple" name="animales[]">
<option value="Perro">Perro</option>
<option value="Gato">Gato</option>
<option value="Loro">Loro</option>
</select>Si observamos en nombre de la etiqueta le hemos agregado unos corchetes que nos servirá para procesar los múltiples datos del select y luego podríamos almacenar en una base de datos.
Ciclo Foreach con SELECT2
En en paso anterior hemos agregado corchetes al nombre del select y lo hemos preparado para que el bucle foreach pueda recorrerlo e imprimirlo en pantalla.
foreach($_POST['animales'] as $key) {
echo $key."<br>";
}Ademas, nos apoyamos del plugin select2
Aquí les mostrare la integración completa.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Declaramos libreria Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<h5 class="card-header">Visualizar valores de select mutiple</h5>
<div class="card-body">
<form method="POST" action="">
<div class="form-group">
<label for="exampleFormControlInput1">Seleccione animales</label>
<select class="form-control basico" multiple="multiple" name="animales[]">
<option value="Perro">Perro</option>
<option value="Gato">Gato</option>
<option value="Loro">Loro</option>
</select>
</div>
<button class="btn btn-primary" name="enviar">Procesar</button>
</form>
</div>
<div class="card-footer">
<p class="card-title">Resultados</p>
<p class="text-muted">
<?php
if(!empty($_POST["animales"])) {
foreach($_POST['animales'] as $key) {
echo $key."<br>";
}
}
?>
</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.basico').select2();
});
</script>
</body>
</html>De esta simple forma podemos gestionar y/o procesar los datos de un select múltiple. Espero que esta explicación les ayude
