菜单

选择允许用户通过指定选项进行输入。请确保将其包装在 .input-field 中，以便与其他文本字段正确对齐。请记住，这是一个 jQuery 插件，因此请确保在文档准备就绪时 初始化 它。


您可以添加属性 multiple 以获取多重选择并选择多个选项。


我们还支持在我们的选择中使用选择组。


您可以在任何类型的选择中向您的选项添加图标。在选项中，您可以使用 data-icon 属性添加图像源。


您可以添加类 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>

初始化

您必须按如下所示初始化选择元素。此外，您需要对页面生成的任何动态生成的元素进行单独调用。


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

  // Or with jQuery

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

选项

名称 类型 默认值 描述
classes 字符串 '' 要添加到选择包装器元素的类。
dropdownOptions 对象 {} 将选项对象传递给选择下拉初始化。

方法

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以像这样获取插件实例


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

以数组形式获取选定的值。

返回值

数组：选定值的数组。


instance.getSelectedValues();

.destroy();

销毁插件实例并拆除


instance.destroy();

属性

名称 类型 描述
el 元素 用于初始化插件的 DOM 元素。
options 对象 实例初始化时的选项。
isMultiple 布尔值 如果这是多选。
wrapper 元素 选择包装器元素。
dropdownOptions 元素 下拉 UL 元素。
input 元素 显示当前所选选项的文本输入。
dropdown 下拉 此选择的下拉插件实例。


禁用样式

你还可以向选择元素添加 disabled 以禁用整个元素。或者如果你向选项添加 disabled，则将无法选择各个选项。


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