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

Oracle Fusion Advanced Collections New Features in Release 12

In this article, you may locate the data you want up to date understand about new or advanced capability in Oracle Fusion advanced Collections launch 12 and describes any duties you may need daily carry out for the update. each segment includes a short description of the function, the stairs you need day-upupdated take daily allow or begin using the function, any pointers or issues which you day-upupdated hold in thoughts, and the resources daily daily. “Oracle Fusion superior Collections allows you everyday accumulate extra cash quicker with less attempt with the aid of applying first-rate practice series methods on the proper time. Oracle Fusion advanced Collections is part of Oracle Fusion Financials ’ credit score up-to-date cash answer which helps you enhance cash glide, boom efficiencies, optimize updated relationships and instill corporate and monetary field.” Advanced Collections provides a comprehensive solution to manage day-to-day collection operations. Automation capa...
Post a Comment
Read more

Advanced IBM Tivoli Interview Questions & Answers 2017 | Mindmajix

If you are looking for expertise before you enter into the prospective job field, you’ll want to have a series of questions to excel. Get free access to frequently asked Interview Questions with detailed Answers and Explanations. It is perfect for practicing for your next technical job, technical test and support. There are lot of opportunities from many reputed companies in the world. So, You still have opportunity to move ahead in your career in IBM Tivoli certification guide. Mindmajix offers advanced IBM Tivoli Interview Questions that helps you in cracking your interview & acquire dream career. Checkout For More info IBM Tivoli Interview Questions:: https://mindmajix.com/ibm-tivoli-interview-questions #IBM_Tivoli , #IBM_Tivoli_Technical_Interview_Questions , #IBM_Tivoli_Questions_And_Answers , #IBM_Tivoli_Interview_Questions_For_Freshers , #IBM_Tivoli_Interview_Questions_For_Experienced
Post a Comment
Read more