lightning:select

lightning:select コンポーネントは HTML select 要素を作成します。このコンポーネントは、HTML option 要素を使用してドロップダウンリストのオプションを作成し、リストから 1 つのオプションを選択できるようにします。複数選択は現在サポートされていません。

このコンポーネントは、Lightning Design System の入力選択からスタイル設定を継承します。

ドロップダウンリストでのさまざまな入力イベントを処理する��ライアント側コントローラアクションを定義できます。たとえば、コンポーネントでの変更イベントを処理するには、onchange 属性を使用します。cmp.find("selectItem").get("v.value") を使用して、選択した値を取得します。

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

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

動的なオプションの生成

コンポーネントの初期化時にオプションを動的に生成します。初期化時に、次のコンポーネントがクライアント側コントローラをコールして、オプションを作成し、lightning:select コンポーネントのボディに挿入します。

クライアント側コントローラで、$A.createComponent を使用して、option タグを作成します。オプションを lightning:select のボティに追加して、コンポーネントに新しいボディを設定します。

入力規則

このコンポーネントでは、クライアント側で入力規則が使用できます。テキストエリアを必須項目にするには、required="true" を選択します。required="true" で項目が選択されていない場合、エラーメッセージが自動的に表示されます。

入力の有効性状態を確認するには、ValidityState オブジェクトに基づく validity 属性を使用します。有効性状態にはクライアント側コントローラでアクセスできます。この validity 属性は、boolean プロパティが設定されたオブジェクトを返します。詳細は、lightning:inputを参照してください。

messageWhenValueMissing に独自の値を指定し、デフォルトのメッセージを上書きできます。

使用上の考慮事項

onchange イベントは、ユーザがマウスをクリックしてドロップダウンリストの値を選択した場合にのみトリガされます。HTML select 要素の予期される動作は、マウスのクリックです。value 属性をプログラムで変更した場合、その変更が選択要素に伝達されたとしても、このイベントはトリガされません。このイベントをプログラムで処理するには、value の変更ハンドラを指定します。

アクセシビリティ

アクセシビリティのためのテキスト表示ラベルを指定して、情報が支援技術で使用できるようにする必要があります。label 属性は、入力コンポーネントの HTML label 要素を作成します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

focus(): フォーカスを要素に設定します。