Comment utiliser select et multiselect dans Bootstrap ?

Le framework Bootstrap a été conçu pour faciliter le design des sites internet. Il fournit un ensemble d'éléments qui permettent de concevoir plus rapidement et de manière uniforme un site internet moderne et réactive. Le multiselect fait partie de ces éléments. C'est une liste déroulante qui combine des cases à cocher, afin que l'on puisse sélectionner un ou plusieurs éléments facilement. Apparu dans Bootstrap-3, on peut l'utiliser également depuis la version 1.13.0 de Bootstrap-4.

Pour utiliser le multiselect, vous devez intégrer dans votre code le composant "bootstrap-select". Ensuite vous devez, dans votre HTML, utiliser un select. Ajoutez-lui la classe "selectpicker" et l'attribut "multiple", pour que le framework reconnaisse qu'il s'agit d'un multiselect. Vous pouvez ajouter également l'attribut "data-livre-search". Cette option permet de faire une recherche dans la liste déroulante. C'est très pratique si vous ajoutez une liste très fournie. Pensez à inclure une option pour sélectionner en JavaScript plus facilement votre liste déroulante. Cela peut être un identifiant s'il n'y a qu'une seule liste déroulante ou une classe. Indiquez ensuite toutes les options de votre liste. Il ne reste plus qu'à vous faire appel à la fonction "selectpicker()" dans votre code JavaScript pour activer le multiselect.

//Code Javascript
$('#mon-select').selectpicker(),

<!-- HTML -->
<!-- Appel des feuilles de styles scripts Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<!-- Inclusion des feuilles de styles et script pour le composant Bootstrap-select -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<!-- Select à utiliser -->
<select id="mon-select" class="selectpicker" multiple data-live-search="true">
  <option>Rouge</option>
  <option>Bleu</option>
  <option>Vert</option>
  <option>Jaune</option>
</select>
Autour du même sujet

Bootstrap