Select allows user input through specified options. Make sure you wrap it in a
.input-field
for proper alignment with other text fields.
<div class="input-field col s12">
<select id="form-select-1">
<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 for="form-select-1">Materialize Select</label>
</div>
<div class="input-field col s12">
<select id="form-select-2" 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 for="form-select-2">Materialize Multiple Select</label>
</div>
<div class="input-field col s12">
<select id="form-select-3">
<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 for="form-select-3">Optgroups</label>
</div>
<div class="input-field col s12 m6">
<select id="form-select-4" class="icons">
<option value="" disabled selected>Choose your option</option>
<option value="" data-icon="images/sample-1.jpg">example 1</option>
<option value="" data-icon="images/office.jpg">example 2</option>
<option value="" data-icon="images/yuna.jpg">example 3</option>
</select>
<label for="form-select-4">Images in select</label>
</div>
<div class="input-field col s12 m6">
<select id="form-select-5" class="icons">
<option value="" disabled selected>Choose your option</option>
<option value="" data-icon="images/sample-1.jpg" class="left">example 1</option>
<option value="" data-icon="images/office.jpg" class="left">example 2</option>
<option value="" data-icon="images/yuna.jpg" class="left">example 3</option>
</select>
<label for="form-select-5">Images in select</label>
</div>
<label for="form-select-6">Browser Select</label>
<select id="form-select-6" 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>
Initialization
You must initialize the select element as shown below. In addition, you will need a separate call to init() for any dynamically generated select or any changes to an existing select.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, {
// specify options here
});
});
Options
Name | Type | Default | Description |
---|---|---|---|
classes | String | '' | Classes to be added to the select wrapper element. |
dropdownOptions | Object | {} | Pass options object to select dropdown initialization. |
Methods
All the methods are called on the plugin instance. You can get the plugin instance like this:
var instance = M.FormSelect.getInstance(elem);
.getSelectedValues();
Get selected values in an array.
Return Value
Array: Array of selected values.
instance.getSelectedValues();
.destroy();
Destroy plugin instance and teardown
instance.destroy();
Properties
Name | Type | Description |
---|---|---|
el | Element | The DOM element the plugin was initialized with. |
options | Object | The options the instance was initialized with. |
isMultiple | Boolean | If this is a multiple select. |
wrapper | Element | The select wrapper element. |
dropdownOptions | Element | Dropdown UL element. |
labelEl | Element | Label associated with the current select element. Is "null", if not detected. |
input | Element | Text input that shows current selected option. |
dropdown | Dropdown | Instance of the dropdown plugin for this select. |
Disabled Styles
You can also add
disabled
to the select element to make the whole thing disabled. Or if you add
disabled
to the options, the individual options will be unselectable.
<div class="input-field">
<select id="form-select-7" 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 for="form-select-7">Materialize Disabled</label>
</div>
<label for="form-select-8">Browser Disabled</label>
<select id="form-select-8" class="browser-default" 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>