lightning:combobox (ベータ)

lightning:combobox は、オプションのリストの単一選択を有効にする入力要素です。選択結果は入力値として表示されます。

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

次の例では、初期化中のオプションのリスト (デフォルト選択あり) を作成します。

1<aura:component>
2    <aura:attribute name="statusOptions" type="List" default="[]"/>
3    <aura:handler name="init" value="{! this }" action="{! c.loadOptions }"/>
4    <lightning:combobox aura:id="selectItem" name="status" label="Status"
5                      placeholder="Choose Status"
6                      value="new"
7                      onchange="{!c.handleOptionSelected}"
8                      options="{!v.statusOptions}"/>
9</aura:component>

クライアント側コントローラで、オプションの配列を定義し、この配列を statusOptions 属性に割り当てます。各オプションは、ドロップダウンリストのリスト項目に対応します。

1({
2    loadOptions: function (component, event, helper) {
3        var options = [
4            { value: "new", label: "New" },
5            { value: "in-progress", label: "In Progress" },
6            { value: "finished", label: "Finished" }
7        ];
8        component.set("v.statusOptions", options);
9    },
10    handleChange: function (cmp, event) {
11        // Get the string of the "value" attribute on the selected option
12        var selectedOptionValue = event.getParam("value");
13        alert("Option selected with value: '" + selectedOptionValue + "'");
14    }
15})

オプションを選択すると、onchange イベントがトリガされ、handleChange クライアント側コントローラがコールされます。クリックされたオプションをチェックするには、event.getParam("value") を使用します。cmp.find("mycombobox").get("v.value"); をコールすると、現在選択されているオプションが返されます。

入力規則

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

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

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

アクセシビリティ

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

メソッド

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

checkValidity(): コンボボックスに有効性エラーがあるかどうかを示す ValidityState オブジェクトの有効なプロパティ値 (Boolean) を返します。