Skip to main content

Bootstrap Multiselect

Bootstrap Multiselect is a jQuery based plugin that allows users to select multilple options from a standard select UI element.
Its implementation is quite simple, and in exchange brings a lot of UX value.
Examples of Bootstrap Multiselect use:
  • Ingredience choice within pizza delivery system
  • Laptop hardware configuration in online shop
  • Flight booking customization
See the following mutliselect dropdown example:
▼
                
<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="4">Poland</option>
    <option value="5">Japan</option>
</select>
<label>Label example</label>
                
            

Copy
Overwriting a standard select
MDB overwrites a standard select to replace it with our Material Select. That's why before you can use it, you have to initialize Material Select by placing following code in your project.
In addition, you will need a separate call for any dynamically generated select elements your page generates.

Initialization:


// Material Select Initialization
$(document).ready(function() {
    $('.mdb-select').material_select();
});
            

Copy

Standard multiselect 

▼

<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="4">Poland</option>
    <option value="5">Japan</option>
</select>
            

Copy

Multiselect with label 

▼

<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

Colorful Multiselect with label 

▼

<select class="mdb-select colorful-select dropdown-primary" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

Multiselect with options groups 

▼

<select class="mdb-select" multiple>
    <optgroup label="team 1" >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="team 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>
            

Copy

Multiselect with icons 

▼

<select class="mdb-select" multiple>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
</select>
            

Copy

Multiselect with search box 

▼

<select class="mdb-select" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
            

Copy

Multiselect with label and search box 

▼

<select class="mdb-select" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

Colorful Multiselect with label and search box 

▼

<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

Multiselect with options groups and search box 

▼

<select class="mdb-select" multiple searchable="Search here..">
    <optgroup label="team 1" >
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="team 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>
            

Copy

Multiselect with icons and search box 

▼

<select class="mdb-select" multiple searchable="Search here..">
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
</select> 
Labels:

Comments

Post a Comment

Popular posts from this blog

Oracle SOA (Service Oriented Architecture) Interview Questions

If you're looking for Oracle SOA Interview Questions for Experienced or Freshers, you are at right place. There are lot of opportunities from many reputed companies in the world. According to research Oracle SOA has a market share of about 32.2%. So, You still have opportunity to move ahead in your career in Oracle SOA Analytics. Mindmajix offers Advanced Oracle SOA Interview Questions 2018 that helps you in cracking your interview & acquire dream career as Oracle SOA Analyst. Q1) Define SOA SOA is also known as the acronym for Service Oriented Architecture. It is also known as a framework for building applications that can be used for commercial purposes. It is important to note in this context that during the development process of these applications, SOA uses loosely coupled strategies. These can be combined to achieve a considerable amount of functionality. Q2) Shed light on the various principles on which SOA is based SOA is based on the following principles. They a...
Post a Comment
Read more

Build Your Career With TensorFlow Training Online At Mindmajix

Post a Comment
Read more

Additional Human Resources Features Of SAP ERP

SAP ERP has to keep tempo with swiftly changing social and legislative traits in the corporate international. The HR module has been elevated to include capabilities that assist managers with SAP HR responsibilities which have handiest lately become critical to businesses. Cell Time management Many personnel, in particular income personnel who spend a substantial amount of time on the road, might not have normal access to a pc. mobile Time management permits employees to apply cell phones to record their running instances, document absences, input a leave request, and check their time fee statistics. Management of circle of relatives and scientific go away The Human assets module reduces the executive burden imposed by means of the federal own family and clinical depart Act (FMLA) of 1993. The HR system can now determine whether an worker is eligible to take FMLA absences and automatically deducts those absences from the days the employee takes from allowable depart. Home ass...
Post a Comment
Read more