menu

Select allows user input through specified options. Make sure you wrap it in a .input-field for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you initialize this in your document ready.


You can add the property multiple to get the multiple select and select several options.


We also support optgroups in our selects.


You can add icons to your options in any type of select. In the option you add the image source with the data-icon attribute.


You can add the class browser-default to get the browser default.


  <div class="input-field col s12">
    <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>Materialize Select</label>
  </div>

  <div class="input-field col s12">
    <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>Materialize Multiple Select</label>
  </div>

  <div class="input-field col s12">
    <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>Optgroups</label>
  </div>

  <div class="input-field col s12 m6">
    <select 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>Images in select</label>
  </div>
  <div class="input-field col s12 m6">
    <select 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>Images in select</label>
  </div>

  <label>Browser 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>

Initialization

You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, {
      // specify options here
    });
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect({
      // 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

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this: 


  var instance = M.FormSelect.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('select').formSelect('methodName');
    $('select').formSelect('methodName', paramName);
  */
.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.
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 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>Materialize Disabled</label>
  </div>

  <label>Browser Disabled</label>
  <select 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>