Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Introduction

Our Material Select is a beautiful alternative for standard select.

MDB provides you a variety of options and variations.

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

Basic example Premium 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>

Color variations Premium 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 Premium 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 Premium 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 Premium 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 Premium 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

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>