ui:inputSelect | Lightning コンポーネント開発者ガイド

ui:inputSelect コンポーネントは、HTML select 要素として表示されます。ui:inputSelectOption コンポーネントで表されるオプションが含まれます。複数選択を有効にするには、multiple="true" を設定します。入力値選択時のクライアント側のロジックを関連付けるには、change イベントを使用します。

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

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

動的なオプションの生成

コントローラ側のアクションを使用して、コンポーネントの初期化時に動的にオプションを生成します。

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

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

次の例では、単一および複数選択が有効なドロップダウンリストと、動的に生成されたリストオプションを使用する別のドロップダウンリストを表示します。ui:inputSelect コンポーネントの選択値を取得します。

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`multiple`	Boolean	入力が複数選択かどうかを指定します。デフォルト値は「false」です。
`options`	ArrayList	aura.components.ui.InputOption のリスト。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	String	現在、値は入力項目にあります。

イベント

イベント名	イベントタイプ	説明
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`keyup`	COMPONENT	ユーザがキーボード��ーを放したことを示します。
`keypress`	COMPONENT	ユーザがキーボードキーを押したままにしたことを示します。
`select`	COMPONENT	ユーザが選択を行ったことを示します。
`keydown`	COMPONENT	ユーザがキーボードキーを押してから放したことを示します。
`focus`	COMPONENT	コンポーネントにフォーカスが置かれたことを示します。
`blur`	COMPONENT	コンポーネントからフォーカスが離れたことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`cut`	COMPONENT	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。