Fluxo

Bootstrap Multiselect #

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present.

How it works #

Here is how the Multiselect works with Fluxo:

  • Bootstrap Multiselect works with <select> element.
  • The multiple="multiple" attribute is applied to the <select>.
  • Each <select> need to has a unique "id".
  • Required jQuery and Popper.js.

How to Use #

Copy-paste the following css inside the <head> tag of your pages under <!-- Vendor/Plugins CSS --> to give it a style.

<link rel="stylesheet" href="css/vendor/bootstrap-multiselect.min.css">

Copy-paste the following <script> near the end of your pages under <!-- Global Required JS --> to enable the required Popper.js.

<script src="js/vendor/popper.min.js"></script>

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS --> to enable Bootstrap Multiselect.

<script src="js/vendor/bootstrap-multiselect.min.js"></script>

Copy-paste the following <script> near the end of your pages under <!-- Vendor/Plugins JS Init --> to initialize it.

<script src="js/init/wb.multiselect-init.js"></script>

Please take a look at the example init code below:

$('#jobPosition').multiselect({         // #1
  buttonContainer: '<div class="btn-multiselect" />',
  buttonClass: 'custom-select',
  nonSelectedText: 'Select position',   // #2
  includeSelectAllOption: true,
  allSelectedText: 'All positions'      // #3
});

As you can see on the line with number, you can adjust your select by:

  1. Call the id of your select element, in example is #jobPosition.
  2. Adjust the initial 'placeholder' for your select element.
  3. Adjust the text when all the option are selected.

Open the wb.multiselect-init.js file with your code editor, and find the settings like stated above.

Form Example #

<div class="form-group">
  <label for="jobPosition">Position :</label>
  <select id="jobPosition" class="custom-select" multiple="multiple">
    <option value="position1">Business</option>
    <option value="position2">Design</option>
    <option value="position3">Development</option>
    <option value="position4">Engineering</option>
  </select>
</div>