Dans les applications web modernes, les formulaires de recherche requisent fréquemment des options multiples. Le plugin bootstrap-select, intégrant jQuery et Bootstrap, fournit une interface riche pour créer des sélections multiples personnalisées.
Intégration des ressources
Préparez votre environnement en incluant les dépenadnces requises dans l'en-tête HTML :
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-select.min.css">
<script src="jquery-3.6.0.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="bootstrap-select.js"></script>
</head>
Définition du composant de sélection
Structurez votre liste déroulante avec l'attribut multiple pour activer les sélections plurielles :
<div class="selection-wrapper">
<select id="roleFilter" class="selectpicker show-tick form-control"
multiple data-live-search="false" title="Tous les rôles">
<option value="admin">Administrateur</option>
<option value="editor">Éditeur</option>
<option value="viewer">Lecteur</option>
<option value="moderator">Modérateur</option>
<option value="analyst">Analyste</option>
</select>
</div>
Configuratino et gestion des événements
Initialisez le plugin après le chargement du DOM et gérez les interactions utilisateur :
<script>
$(document).ready(function() {
$('#roleFilter').selectpicker({
selectedTextFormat: 'count > 3'
});
// Écouteur pour les changements de sélection
$('#roleFilter').change(function() {
const chosenRoles = [];
$('.selection-wrapper .selected').each(function() {
const roleLabel = $(this).text().trim();
if (roleLabel) chosenRoles.push(roleLabel);
});
console.log('Rôles sélectionnés:', chosenRoles);
});
});
</script>
Manipulation programmatique
Contrôlez l'état du composant via les méthodes offertes par le plugin :
Pour définir des valeurs initiales :
$('#roleFilter').selectpicker('val', ['editor', 'analyst']);
Pour désactiver temporairement le composant :
$('#roleFilter').prop('disabled', true);
$('#roleFilter').selectpicker('refresh');
Pour réactiver le composant :
$('#roleFilter').prop('disabled', false);
$('#roleFilter').selectpicker('refresh');
Les méthodes refresh et render permettent de synchroniser l'interface avec les modifications dynamiques :
$('#roleFilter').selectpicker('refresh');
$('#roleFilter').selectpicker('render');