Bootstrap Select

Bootstrap material select is a form control which after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

MDB provides you a variety of options and variations.


Basic example MDB Pro component

                
<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>
                
            

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();
  });

Color variations MDB Pro component

                
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-primary">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
<label>Blue select</label>
<!--/Blue select-->
                
            

In order to change a select color use one of the following classes:

1. .dropdown-primary

2. .dropdown-danger

3. .dropdown-default

4. .dropdown-secondary

5. .dropdown-success

6. .dropdown-info

7. .dropdown-warning

8. .dropdown-ins

9. .dropdown-dark


Multiple select MDB Pro component

                
<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>
                
            

Options groups MDB Pro component

                
<select class="mdb-select">
    <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>
<label>Example label</label>
                
            

Select with icons MDB Pro component

                
<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <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>
<label>Example label</label>
                
            

Disabled select MDB Pro component

By adding a disabled attribute to the select (or particular option), you can make it unselectable.

                
<!-- Disabled select-->
<select class="mdb-select" disabled>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>

<!--Disabled option-->
<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <option value="1" disabled>Disabled option</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>
                
            

Updating/destroying material select MDB Pro component

To update the items inside the existing Material Select you can destroy it with the function below and then initialize it again.


 // Material Select Destroy
 $('.mdb-select').material_select('destroy');

Default select

Default Select doesn't require an initialization. You only need to add a .browser-default class to the select element.

                
<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>