選択 - Materialize

選択では、指定されたオプションを介してユーザー入力を行うことができます。他のテキストフィールドと正しく配置するには、.input-field で囲んでください。これは jQuery プラグインであるため、ドキュメントの準備ができたときに初期化してください。

Materialize 選択

プロパティ multiple を追加して、複数選択を取得し、複数のオプションを選択できます。

Materialize 複数選択

選択項目ではオプトグループもサポートしています。

オプトグループ

あらゆる種類の選択項目にアイコンを追加できます。オプションには、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();
  });

名前	タイプ	デフォルト	説明
クラス	文字列	''	選択ラッパー要素に追加されるクラス。
ドロップダウンオプション	オブジェクト	{}	オプションオブジェクトを選択ドロップダウンの初期化に渡します。

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 要素。
オプション	オブジェクト	インスタンスが初期化されたオプション。
isMultiple	ブール値	これが複数選択の場合。
ラッパー	要素	選択ラッパー要素。
ドロップダウンオプション	要素	ドロップダウン UL 要素。
入力	要素	現在選択されているオプションを表示するテキスト入力。
ドロップダウン	ドロップダウン	この選択のドロップダウンプラグインのインスタンス。

選択要素に 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>