Portada » JQuery biblioteca de JavaScript » Select2 » Procesar select múltiple con foreach PHP

Procesar select múltiple con foreach PHP

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.

Procesar select múltiple con foreach PHP
Procesar select múltiple con foreach PHP

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

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad