lightning:select

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

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

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

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

属性を使用して、コンポーネントでオプション値の配列を保存および設定します。次のコンポーネントは、コンポーネントの初期化時にクライアント側コントローラをコールして、オプションを作成します。

クライアント側コントローラで、オプションの配列を定義し、この配列を items 属性に割り当てます。

コンポーネントで新しいオプションの配列を指定しても、競合状況が発生して、選択した新しい値がコンポーネントの値に反映されないことがあります。たとえば、新しいオプションを選択した後で component.find("mySelect").get("v.value") を実行しても、オプションの表示が完了する前の値を取得するため、以前に選択した値がコンポーネントから返されます。この競合状況を回避するには、前の例のように lightning:select コンポーネントの value 属性と selected 属性をバインドします。また、新しいオプション値の selected 属性をバインドし、次の例のようにコンポーネントで選択した値を明示的に設定します。これにより、コンポーネントの値が選択した新しいオプションに対応します。

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

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

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

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

次の例では、クリックしたときに選択されたオプションが変更されるドロップダウンリストとボタンを作成します。

クライアント側コントローラは、v.status 値を変更して変更ハンドラをトリガし、選択されたオプションを更新します。

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

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

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

showHelpMessageIfInvalid(): フォームコントロールが無効な状態の場合、ヘルプメッセージを表示します。