Multiselect con SELECT2 en editar página

Multiselect con SELECT2 en editar página
Multiselect con SELECT2 en editar página

Multiselect con SELECT2 en editar página. Vamos a aprender a editar un select múltiple usando PHP y la librería select2 con base de datos MySQL.

Para el control del cuadro de lista, no se proporciona una opción de selección múltiple de forma predeterminada. Y deberíamos establecer MÚLTIPLES propiedades con la etiqueta SELECT. Para configurar podemos utilizar las dos formas siguientes.

Multiselect con SELECT2 en editar página
Multiselect con SELECT2 en editar página

Primera forma:

<select name="mySelect" multiple="multiple"> ...
</select>

Segunda forma:

<select name="mySelect" multiple> ...
</select>

Nota:
Para seleccionar múltiples elementos, el usuario debe mantener presionadas las teclas Ctrl+Shift para seleccionar múltiples valores.
En este tutorial vamos a ver un ejemplo con la opción de selección múltiple y cómo acceder desde PHP. Y también, vamos a mostrar cómo completar los valores seleccionados en la página de edición.

Tabla de contenidos

Mostrar el cuadro de selección múltiple en una página agregar

En este programa de ejemplo PHP, tenemos un control de cuadro de lista con un conjunto de idiomas. Se cargará dinámicamente desde una tabla MySQL.

Primer paso: Base de datos

Creamos una base de datos de nombre db_ejemplos y ahí poblaremos con 2 tablas usando la siguiente consulta SQL.

CREATE TABLE `languages` (
`lang_id` int(4) NOT NULL,
`lang_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;


INSERT INTO `languages` (`lang_id`, `lang_name`) VALUES
(1, 'Espanol'),
(2, 'Ingles'),
(3, 'Chino'),
(4, 'Aleman');


CREATE TABLE `users` (
`user_id` int(4) NOT NULL,
`user_name` varchar(255) NOT NULL,
`languages_known` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;


INSERT INTO `users` (`user_id`, `user_name`, `languages_known`) VALUES
(1, 'Karina', 'Espanol,Chino');


ALTER TABLE `languages`
ADD PRIMARY KEY (`lang_id`);

ALTER TABLE `users`
ADD PRIMARY KEY (`user_id`);

ALTER TABLE `languages`
MODIFY `lang_id` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;


ALTER TABLE `users`
MODIFY `user_id` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

Segundo paso: La conexión MySQL

Es muy importante para insertar y editar datos desde PHP y MySQL de una manera dinámica.

<?php

$conn = new mysqli("localhost", "root", "root", "db_ejemplos");
if ($conn->connect_errno) {
die("error de conexión: " . $conn->connect_error);
}

?>

Tercer paso: Poblar select con base de datos

Haciendo uso de una consulta SQL podemos poblar un SELECT de manera espontánea.

<select class="form-control basico" name="languages_known[]" multiple="multiple">
<?php
$lang_result = mysqli_query($conn,"SELECT * FROM languages");
$i=0;
while($lang_stack = mysqli_fetch_array($lang_result)) {
?>
<option value="<?=$lang_stack["lang_name"];?>" ><?=$lang_stack["lang_name"];?></option>
<?php
$i++;
}
?>
</select>

Editar Select Múltiple con PHP

Es la respuesta del título de esta entrada, editar un select múltiple con MySQL y PHP.

  • Dividimos la columna languages_known recuperada en una matriz $usuario_lang.
  • Verifique cada valor de $lang_stack, si existe en la matriz ampliada $usuario_lang. Estamos usando PHP in_array() para verificar.
  • Si se encuentra una coincidencia, debemos mantener esa opción de selección seleccionada mediante la propiedad SELECTED HTML.
<select class="form-control" name="languages_known[]" multiple="multiple">
<?php
$usuario_lang = explode(",",$usuarios["languages_known"]);
$lang_result = mysqli_query($conn,"SELECT * FROM languages");
$i=0;
while($lang_stack = mysqli_fetch_array($lang_result)) {
if(in_array($lang_stack["lang_name"],$usuario_lang)){ $marcados = "selected";
}else {$marcados="";
}
?>
<option value="<?=$lang_stack["lang_name"];?>" <?php echo $marcados; ?>>
<?=$lang_stack["lang_name"];?>
</option>
<?php
$i++;
}
?>
</select>

Editar Select múltiple con SELECT2

Si se desea trabajar de una manera más profesional se recomienda usar la siguiente librería.

Para usar la librería SELECT2 se requiere declarar 2 archivos y podemos usarlo vía CDN o descargar esos ficheros en nuestro servidor web.

<!--Select2 Integracion-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

Estas 2 líneas de código deben ser declarados en la etiqueta head de nuestra página.

Etiqueta select múltiple con integración de la librería SELECT2

Veamos la integración de select2 en una etiqueta de tipo select, veamos el ejemplo.

<select class="form-control basico" name="languages_known[]" multiple="multiple">
<?php
$usuario_lang = explode(",",$usuarios["languages_known"]);
$lang_result = mysqli_query($conn,"SELECT * FROM languages");
$i=0;
while($lang_stack = mysqli_fetch_array($lang_result)) {
if(in_array($lang_stack["lang_name"],$usuario_lang)){ $marcados = "selected";
}else {$marcados="";
}
?>
<option value="<?=$lang_stack["lang_name"];?>" <?php echo $marcados; ?>>
<?=$lang_stack["lang_name"];?>
</option>
<?php
$i++;
}
?>
</select>

Llamado de la librería SELECT2

Por último, no olvidar el llamado de select2 en la etiqueta select usando una clase llamado BASICO.

<script>
$(document).ready(function() {
$('.basico').select2({
width: '100%'
});
});
</script>

Uniendo todo el código con HTML, PHP, MySQL y con la libreria select2

<?php

$conn = new mysqli("localhost", "root", "root", "db_ejemplos");
if ($conn->connect_errno) {
die("error de conexión: " . $conn->connect_error);
}


if(isset($_POST["submit"])) {
mysqli_query($conn,"Update users SET user_name='" . $_POST["user_name"] . "', languages_known='" . implode(",", $_POST["languages_known"]) . "'");
}
$result = mysqli_query($conn,"SELECT * FROM users");
$usuarios= mysqli_fetch_array($result);
?>
<!doctype html>
<html>
<head>
<title>Multiselect en PHP</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>
<!--Select2 Integracion-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="card mt-3">
<div class="card-header text-white" style="background-color: #00AA9E;"> Multiselect con PHP </div>
<div class="card-body">
<form action="" method="POST">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" name="user_name" class="form-control" value="<?php echo $usuarios["user_name"]; ?>">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Mis Idiomas:</label>
<div class="col-sm-10">
<select class="form-control" name="languages_known[]" multiple="multiple">
<?php
$usuario_lang = explode(",",$usuarios["languages_known"]);
$lang_result = mysqli_query($conn,"SELECT * FROM languages");
$i=0;
while($lang_stack = mysqli_fetch_array($lang_result)) {
if(in_array($lang_stack["lang_name"],$usuario_lang)){ $marcados = "selected";
}else {$marcados="";
}
?>
<option value="<?=$lang_stack["lang_name"];?>" <?php echo $marcados; ?>>
<?=$lang_stack["lang_name"];?>
</option>
<?php
$i++;
}
?>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" name="submit" class="btn btn-primary">Editar registro</button>
</div>
</div>
</form>
</div>
</div>
<br>
<br>
<br>
<div class="card mt-3">
<div class="card-header text-white" style="background-color: #00AA9E;"> Multiselect con PHP y SELECT2 </div>
<div class="card-body">
<form action="" method="POST">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Nombre</label>
<div class="col-sm-10">
<input type="text" name="user_name" class="form-control" value="<?php echo $usuarios["user_name"]; ?>">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Mis Idiomas:</label>
<div class="col-sm-10">
<select class="form-control basico" name="languages_known[]" multiple="multiple">
<?php
$usuario_lang = explode(",",$usuarios["languages_known"]);
$lang_result = mysqli_query($conn,"SELECT * FROM languages");
$i=0;
while($lang_stack = mysqli_fetch_array($lang_result)) {
if(in_array($lang_stack["lang_name"],$usuario_lang)){ $marcados = "selected";
}else {$marcados="";
}
?>
<option value="<?=$lang_stack["lang_name"];?>" <?php echo $marcados; ?>>
<?=$lang_stack["lang_name"];?>
</option>
<?php
$i++;
}
?>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" name="submit" class="btn btn-primary">Editar registro</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('.basico').select2({
width: '100%'
});
});
</script>
</div>
</body>
</html>

Resultado de editar select múltiple con php

Multiselect php
Multiselect php

Resultado de editar select múltiple con libreria select2

Multiselect con php select2
Multiselect con php select2

Ya tienen los dos ejemplos, espero que les ayude en sus proyectos web.

Icono

Editar select2 usando PHP

1 archivo(s) 2.18 KB
Descargar
Leave a Reply

Deja una respuesta

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

Botón volver arriba