menu

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


你可以添加属性 multiple来实现多选。


我们也支持对下拉选择中的选项进行分组。


您可以在任何类型的选择中将图标添加到选项中。在选项中，您可以添加图像数据源到 data-icon属性中。


你可以添加 browser-default类来获取浏览器默认下拉列表控件。


  <div class="input-field col s12">
    <select>
      <option value="" disabled selected>选择你的选项</option>
      <option value="1">选项 1</option>
      <option value="2">选项 2</option>
      <option value="3">选项 3</option>
    </select>
    <label>Materialize下拉选择</label>
  </div>

  <div class="input-field col s12">
    <select multiple>
      <option value="" disabled selected>选择你的选项</option>
      <option value="1">选项 1</option>
      <option value="2">选项 2</option>
      <option value="3">选项 3</option>
    </select>
    <label>Materialize多选下拉选择</label>
  </div>

  <div class="input-field col s12">
    <select>
      <optgroup label="team 1">
        <option value="1">选项 1</option>
        <option value="2">选项 2</option>
      </optgroup>
      <optgroup label="team 2">
        <option value="3">选项 3</option>
        <option value="4">选项 4</option>
      </optgroup>
    </select>
    <label>分组选项</label>
  </div>

  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>选择你的选项</option>
      <option value="" data-icon="images/sample-1.jpg">例子 1</option>
      <option value="" data-icon="images/office.jpg">例子 2</option>
      <option value="" data-icon="images/yuna.jpg">例子 3</option>
    </select>
    <label>下拉列表中的图片</label>
  </div>
  <div class="input-field col s12 m6">
    <select class="icons">
      <option value="" disabled selected>选择你的选项</option>
      <option value="" data-icon="images/sample-1.jpg" class="left">例子 1</option>
      <option value="" data-icon="images/office.jpg" class="left">例子 2</option>
      <option value="" data-icon="images/yuna.jpg" class="left">例子 3</option>
    </select>
    <label>下拉列表中的图片</label>
  </div>

  <label>浏览器的下拉选择</label>
  <select class="browser-default">
    <option value="" disabled selected>选择你的选项</option>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
  </select>

初始化

您必须初始化select元素，如下所示。此外，对于页面中的任何动态生成的select元素，都需要单独调用。


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

  // 或用JQuery

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

选项

名称 类型 默认 描述
classes String '' 要添加到select包裹元素的类。
dropdownOptions Object {} 传递选项对象以选择下拉初始化。

方法

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以获得插件实例如下：


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

  /* JQuery方法调用
          您仍然可以使用旧的jQuery插件方法调用。
      但您将无法访问实例属性。

    $('select').formSelect('methodName');
    $('select').formSelect('methodName', paramName);
  */
.getSelectedValues();

获取数组中的选定值。

Return Value

Array:选定值的数组。


instance.getSelectedValues();

.destroy();

销毁插件实例并回收


instance.destroy();

属性

名称 类型 描述
el Element 插件初始化时使用的DOM元素。
options Object 初始化实例时使用的选项。
isMultiple Boolean 是否支持多选
wrapper Element select包裹的元素
dropdownOptions Element 下拉列表UL元素.
input Element 显示当前所选选项的文本值。
dropdown Dropdown 此选择的下拉插件的实例。


禁用样式

您也可以将 disabled添加到select元素中使整个元素处于禁用状态。或者，如果将 disabled添加到选项中，单个选项将不可选择。 


  <div class="input-field">
    <select disabled>
      <option value="" disabled selected>选择你的选项</option>
      <option value="1">选项 1</option>
      <option value="2">选项 2</option>
      <option value="3">选项 3</option>
    </select>
    <label>Materialize下的禁用</label>
  </div>

  <label>Browser下的禁用</label>
  <select class="browser-default" disabled>
    <option value="" disabled selected>选择你的选项</option>
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <option value="3">选项 3</option>
  </select>