この文章は 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 value="{!color}" text="{!color}"></option>
6        </aura:iteration>
7    </lightning:select>
8</aura:component>

初期化時のオプションの生成

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

1<aura:component>
2    <aura:attribute name="options" type="List" />
3    <aura:attribute name="selectedValue" type="String" default="Red"/>
4    <aura:handler name="init" value="{!this}" action="{!c.loadOptions}" />
5    <lightning:select name="mySelect" label="Select a color:" aura:id="mySelect" value="{!v.selectedValue}">
6        <aura:iteration items="{!v.options}" var="item">
7            <option text="{!item.label}" value="{!item.value}" selected="{!item.selected}"/>
8         </aura:iteration>
9    </lightning:select>
10    </aura:component>

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

1({
2    loadOptions: function (component, event, helper) {
3        var opts = [
4            { value: "Red", label: "Red" },
5            { value: "Green", label: "Green" },
6            { value: "Blue", label: "Blue" }
7         ];
8         component.set("v.options", opts);
9    }
10})

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

1updateSelect: function(component, event, helper){
2    var opts = [
3        { value: "Cyan", label: "Cyan" }, 
4        { value: "Yellow", label: "Yellow" }, 
5        { value: "Magenta", label: "Magenta", selected: true }];
6    component.set('v.options', opts);
7    //set the new selected value on the component
8    component.set('v.selectedValue', 'Magenta'); 
9    //return the selected value
10    component.find("mySelect").get("v.value");
11}

入力規則

このコンポーネントでは、クライアント側で入力規則が使用できます。ドロップダウンメニューを必須項目にするには、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 要素を作成します。表示ラベルをビューに表示させず、支援技術には使用できるようにするには、label-hidden バリエーションを使用します。

メソッド

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

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

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

属性

属性名	属性型	説明	必須項目
`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 中に適切なオプションを選択するデフォルト値としても使用されます。値が指定されていない場合、最初のオプションが選択されます。
`variant`	String	バリエーションは入力項目の外観を変更します。使用できるバリエーションは standard と label-hidden です。この値のデフォルトは standard です。

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

lightning:select

属性