Select Field

Required Javascript for this component is at the end of this page.

<Code> 
<!-- Select -->
<div class="form-group">
    <div class="m-select">
        <label class="static-label">Static Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select -->
<div class="form-group">
    <div class="m-select-outline">
        <label class="static-label">Static Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<Code> 
<!-- Select with floating label -->
<div class="form-group">
    <div class="m-select">
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select with floating label -->
<div class="form-group">
    <div class="m-select-outline">
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<Code> 
<!-- Select with primary and accent colors -->
<div class="form-group">
    <div class="m-select primary-blue accent-pink">
        <label class="floating-label">Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select with primary and accent colors -->
<div class="form-group">
    <div class="m-select-outline primary-blue accent-pink">
        <label class="floating-label">Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<Code> 
<!-- Searchable Select -->
<div class="form-group">
    <div class="m-select searchable">
        <label class="floating-label">Searchable</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Searchable outlined select -->
<div class="form-group">
    <div class="m-select-outline searchable">
        <label class="floating-label">Searchable</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
Error Message.
Error Message.
<Code> 
<!-- Select with help block -->
<div class="form-group has-error">
    <div class="m-select primary-blue accent-green">
        <label class="floating-label">Label</label>
        <select class="form-control">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <span class="help-block">Error Message.</span>
    </div>
</div>
<!-- Outlined select with help block -->
<div class="form-group has-error">
    <div class="m-select-outline primary-blue accent-green">
        <label class="floating-label">Label</label>
        <select class="form-control">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <span class="help-block">Error Message.</span>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Select with prepend -->
<div class="form-group">
    <div class="m-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Static Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select with prepend -->
<div class="form-group">
    <div class="m-select-outline">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Static Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Select with prepend and floating label -->
<div class="form-group">
    <div class="m-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select with prepend and floating label -->
<div class="form-group">
    <div class="m-select-outline">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
keyboard
keyboard
<Code> 
<!-- Select with append -->
<div class="form-group">
    <div class="m-select">
        <div class="append">
            <i class="material-icons">keyboard</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined select with append -->
<div class="form-group">
    <div class="m-select-outline">
        <div class="append">
            <i class="material-icons">keyboard</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control">
            <option value=""></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>

Multi Select

<Code> 
<!-- Multi select -->
<div class="form-group">
    <div class="m-select multi-select">
        <label class="static-label">Static Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined multi select -->
<div class="form-group">
    <div class="m-select-outline multi-select">
        <label class="static-label">Static Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<Code> 
<!-- Searchable multi select -->
<div class="form-group">
    <div class="m-select multi-select searchable">
        <label class="floating-label">Searchable</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Searchable outlined multi select -->
<div class="form-group">
    <div class="m-select-outline multi-select searchable">
        <label class="floating-label">Searchable</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Multi select with prepend -->
<div class="form-group">
    <div class="m-select multi-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Static Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined multi select with prepend -->
<div class="form-group">
    <div class="m-select-outline multi-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="static-label">Static Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Multi select with prepend and floating label -->
<div class="form-group">
    <div class="m-select multi-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined multi select with prepend and floating label -->
<div class="form-group">
    <div class="m-select-outline multi-select">
        <div class="prepend">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
account_box
account_box
<Code> 
<!-- Multi select with append -->
<div class="form-group">
    <div class="m-select multi-select">
        <div class="append">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>
<!-- Outlined multi select with append -->
<div class="form-group">
    <div class="m-select-outline multi-select">
        <div class="append">
            <i class="material-icons">account_box</i>
        </div>
        <label class="floating-label">Floating Label</label>
        <select class="form-control" name="cars[]" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>

Javascript

<script>
    $(function() {
        // Initialize Select Fields
        $('.m-select').selectfield();
        $('.m-select-outline').selectfield();
    });
</script>

If a Select Field is inside a Modal and is already initialized on page load, Redraw it by passing the parameter: 'redraw'.

<script>
    $("#myModal").on('shown.bs.modal', function () {
        // Redraw Select Fields
        $('.m-select').selectfield('redraw');
        $('.m-select-outline').selectfield('redraw');
    });
</script>

If options of a select field are changed dynamically, Rebuild it by passing the parameter: 'rebuild'.

<script>
    // Rebuild Select Fields
    $('.m-select').selectfield('rebuild');
    $('.m-select-outline').selectfield('rebuild');
</script>

On this page