62 votes

Bootstrap 4 multiselect dropdown

J'ai lu sur de nombreux forums que le problème du select et du multiselect a été résolu après la version bêta de bootstrap 4.

Malheureusement, je ne parviens pas à afficher le multiselect comme dans ( bootstrap 3 ) dans ( bootstrap 4 ).

Snippet Bootstrap 3

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Snippet Bootstrap 4

$('select').selectpicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

113voto

dippas Points 7854

Parce que le bootstrap-select est un composant d'amorçage et vous devez donc l'inclure dans votre code comme vous l'avez fait pour votre V3

NOTE : ce composant ne fonctionne que dans boostrap-4 depuis la version 1.13.0

$('select').selectpicker();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

2 votes

Mise à jour du site bootstrap-select : developer.snapappointments.com/bootstrap-select et le dépôt github : github.com/snapappointments/bootstrap-select afin de trouver les dernières versions 1.13+ du plugin qui fonctionnent avec bootstrap 4.

0 votes

@dippas selectpicker fonctionne comme prévu, j'ai besoin de sélectionner l'option "ALL". Pouvez-vous m'aider à faire cela ? Merci à l'avance

5 votes

@RakeshKalwa Pas sûr que vous en ayez encore besoin mais vous pouvez sélectionner toutes les options avec $('.selectpicker').selectpicker('selectAll'); et désélectionner toutes les options avec $('.selectpicker').selectpicker('deselectAll'); .

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X