この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

ドロップダウンリスト

ドロップダウンリストには、選択可能なオプションを含むドロップダウンメニューが表示されます。単一選択と複数選択の両方がサポートされています。ドロップダウンリストを作成するには、ui:input から動作とイベントを継承する ui:inputSelect を使用します。

ドロップダウンリストを設定するいくつかの基本的な方法を次に示します。

複数選択の場合、multiple 属性を true に設定します。

単一選択
複数選択

デフォルトの選択値は、value="true" で指定されます。各オプションは ui:inputSelectOption で表されます。

aura:iteration によるオプションの生成

オプションを生成するには、aura:iteration を使用して項目のリストを反復処理します。次の例では、項目のリストを反復処理し、条件に応じてオプションを表示します。

動的なオプションの生成

コンポーネントの初期化時に動的にオプションを生成します。

次のクライアント側のコントローラは、ui:inputSelect コンポーネントで options 属性を使用してオプションを生成します。v.options はオブジェクトのリストを取得し、リストオプションに変換します。このサンプルコードは初期化中にオプションを生成しますが、オプションのリストは v.options でリストを操作するときにいつでも変更できます。コンポーネントは自動的に更新され、新しいオプションが表示されます。

class は、古いバージョンの Internet Explorer では動作しない可能性がある予約語です。二重引用符で囲んだ "class" を使用することをお勧めします。

メモ

上記のデモの opts オブジェクトは、ui:inputSelect 内に ui:inputSelectOptions コンポーネントを作成する InputOption オブジェクトを構築します。

InputOption オブジェクトには次のパラメータがあります。

パラメータ 型 説明
label String ユーザインターフェースに表示するオプションの表示ラベル。
name String オプションの名前。
selected boolean オプションが選択されているかどうかを示します。
value String このオプションの値。

イベントの操作

ui:inputSelect の共通イベントには、change イベントと click イベントがあります。たとえば、change="{!c.onSelectChange}" では、ユーザが選択を変更したときに、関数名 onSelectChange を使用してクライアント側のコントローラアクションがコールされます。

項目レベルのエラーのスタイル設定

ui:inputSelect コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。次の CSS サンプルは、ドロップダウンメニューに固定幅を追加します。

または、class 属性を使用して独自の CSS クラスを指定します。