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

lightning:select

選択入力を表します。

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

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

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

1<aura:component>
2    <lightning:select name="selectItem" label="Select an item" onchange="{!c.doSomething}">
3        <option value="">choose one...</option>
4        <option value="1">one</option>
5        <option value="2">two</option>
6    </lightning:select>
7</aura:component>

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

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

1<aura:component>
2    <aura:attribute name="colors" type="String[]" default="Red,Green,Blue"/>
3    <lightning:select name="select" label="Select a Color" required="true">
4        <aura:iteration items="{!v.colors}" var="color">
5                <option text="{!color}"></option>
6            </aura:iteration>
7    </lightning:select>
8</aura:component>

動的なオプションの生成

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

1<aura:component>
2    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
3    <lightning:select name="colorId" label="Select a color:" aura:id="colorId">
4         <option value="0">Options are loading...</option>
5    </lightning:select>
6</aura:component>

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

1({
2    loadOptions: function (component, event, helper) {
3        var opts = [
4            { id: 1, label: 'Red' },
5            { id: 2, label: 'Green' },
6            { id: 3, label: 'Blue' }
7        ];
8        var defaultValue = 2;
9        var cmp = component.find('colorId');
10        cmp.set('v.body', []); // clear all options
11        var body = cmp.get('v.body');
12        opts.forEach(function (opt) {
13            $A.createComponent(
14                'aura:html',
15                {
16                    tag: 'option',
17                    HTMLAttributes: {
18                        value: opt.id,
19                        text: opt.label
20                    }
21                },
22
23                function (newOption) {
24                    //Add options to the body
25                    if (component.isValid()) {
26                        body.push(newOption);
27                        cmp.set('v.body', body);
28                    }
29                })
30        });
31        cmp.set('v.value', defaultValue);
32    }
33})

入力規則

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

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

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

使用上の考慮事項

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

1<aura:handler name="change" value="{!v.value}" action="{!c.itemsChange}"/>

アクセシビリティ

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

メソッド

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

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

属性

属性名	属性型	説明	必須項目
`accesskey`	String	要素の有効化またはフォーカス設定のためのショートカットキーを指定します。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	外部要素に適用される CSS クラス。このスタイルは、コンポーネントに関連付けられている基本クラスに追加されます。
`disabled`	Boolean	入力要素を無効にするかどうかを指定します。この値のデフォルトは false です。
`label`	String	目的の選択入力を説明するテキスト。	はい
`messageWhenValueMissing`	String	値がない場合に表示されるエラーメッセージ。
`name`	String	入力要素の名前を指定します。	はい
`onblur`	Action	要素がフォーカスを解放したときにトリガされるアクション。
`onchange`	Action	値属性が変更された場合にトリガされるアクション。
`onfocus`	Action	要素にフォーカスが設定されたときにトリガされるアクション。
`readonly`	Boolean	入力項目が参照のみであることを指定します。この値のデフォルトは false です。
`required`	Boolean	フォームを送信する前に入力項目が入力されている必要があることを指定します。この値のデフォルトは false です。
`tabindex`	Integer	要素のタブ順序を指定します (タブボタンがナビゲーションに使用される場合)。
`validity`	Object	制約検証に対して要素が取ることのできる有効性状態を表します。
`value`	String	選択の値。init 中に適切なオプションを選択するデフォルト値としても使用されます。値が指定されていない場合、最初のオプションが選択されます。

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

lightning:select

属性