Select

  1. Overview
  2. HTML
  3. Javascript
  4. Options
  5. Methods
  6. Issues
Overview

The Materialize Select is not a native select element; it is a Dropdown component, triggered when a user focusses a Text Input – both of which are dynamically generated. We add it to the page as a native select, which Materialize hides, replacing it with the two new components.

HTML
<select>
   <option value="" disabled selected>Best Beatle</option>
   <option value="Lennon">John</option>
   <option value="McCartney">Paul</option>
   <option value="Harrison">George</option>
   <option value="Starr">Ringo</option>
</select>
<label>The Fab Four</label>
JavaScript
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });
Options

We are provided with 2 options for customization – classes and dropdownOptions.

classes

This adds a class to the dynamically created .select-wrapper for convenience.

dropdownOptions

Because Materialise select is essentially a Dropdown (UL > LI), this allows us to customize the dropdown using the many options provided for that component. See the full list here.

Methods

Again, we are given 2 methods – .getSelectedValues() and .destroy(). Below is an example of how we can combine onCloseEnd (set as part of dropdownOptions) with .getSelectedValues() to get the value of the selected item in single select element. Below this I have included the output HTML so you can see what Materialize is doing under the hood.

document.addEventListener('DOMContentLoaded', function() {
  
    var elems = document.querySelectorAll('select');
  
    var options = {
      classes:'beatles-select',
      dropdownOptions:{
        onCloseStart:function(){
          instances = M.FormSelect.init(elems,options); // Bugfix
          console.log(instances[0].getSelectedValues());       
        }
      }
    }
    
    var instances = M.FormSelect.init(elems,options);
  
  });
<div class="input-field">
   <div class="select-wrapper beatles-select">
      <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-909b08d8-dce9-707f-3e82-765fd141d866">
      <ul id="select-options-909b08d8-dce9-707f-3e82-765fd141d866" class="dropdown-content select-dropdown" tabindex="0">
         <li class="disabled selected" id="select-options-909b08d8-dce9-707f-3e82-765fd141d8660" tabindex="0"><span>Best Beatle</span></li>
         <li id="select-options-909b08d8-dce9-707f-3e82-765fd141d8661" tabindex="0"><span>John</span></li>
         <li id="select-options-909b08d8-dce9-707f-3e82-765fd141d8662" tabindex="0"><span>Paul</span></li>
         <li id="select-options-909b08d8-dce9-707f-3e82-765fd141d8663" tabindex="0"><span>George</span></li>
         <li id="select-options-909b08d8-dce9-707f-3e82-765fd141d8664" tabindex="0"><span>Ringo</span></li>
      </ul>
      <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
      <select id="beatles" tabindex="-1">
         <option value="" disabled="" selected="">Best Beatle</option>
         <option value="Lennon">John</option>
         <option value="McCartney">Paul</option>
         <option value="Harrison">George</option>
         <option value="Starr">Ringo</option>
      </select></div>
      <label>The Fab Four</label>
   </div>
</div>
Issues

There are currently two main issues, both with temporary fixes:

1. Wrong value selected on iOS.

Serving this patched JS file after materialize.js and before your own custom.js fixes the issue. See this thread for more details.

2. Wrong value returned via getSelectedValues();

Re-initialising the component before accessing the values fixes this issue, shown using the line commented with // Bugfix in above code example.

Suggest an edit

If you think this page contains an error or could be improved - or you have a suggestion for a new article, drop me a message!

Spread the love