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

ドロップダウンリスト

ドロップダウンリストには、選択可能なオプションを含むドロップダウンメニューが表示されます。

単一選択と複数選択の両方がサポートされています。ドロップダウンリストを作成するには、ui:input から動作とイベントを継承する ui:inputSelect を使用します。

ドロップダウンリストを設定するいくつかの基本的な方法を次に示します。

複数選択の場合、multiple 属性を true に設定します。

単一選択

1<ui:inputSelect>
2        <ui:inputSelectOption text="Red"/>
3        <ui:inputSelectOption text="Green" value="true"/>
4        <ui:inputSelectOption text="Blue"/>
5</ui:inputSelect>

複数選択

1<ui:inputSelect multiple="true">
2    <ui:inputSelectOption text="All Primary" label="All Contacts"/>
3    <ui:inputSelectOption text="All Primary" label="All Primary"/>
4    <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
5</ui:inputSelect>

各オプションは ui:inputSelectOption で表されます。デフォルトの選択値は、オプションの value="true" で指定されます。

v.value はオプションの HTML selected 属性を表し、v.text はオプションの HTML value 属性を表します。

メモ

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

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

1<aura:attribute name="contacts" type="String[]" default="All Contacts,Others"/>
2<ui:inputSelect>
3    <aura:iteration items="{!v.contacts}" var="contact">
4        <aura:if isTrue="{!contact == 'All Contacts'}"> 
5            <ui:inputSelectOption text="{!contact}" label="{!contact}"/>
6            <aura:set attribute="else">
7                <ui:inputSelectOption text="All Primary" label="All Primary"/>
8                <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
9            </aura:set>
10        </aura:if>
11    </aura:iteration>
12</ui:inputSelect>

動的なオプションの生成

コンポーネントの初期化時に動的にオプションを生成します。

1<aura:component>
2  <aura:handler name="init" value="{!this} action="{!c.doInit}"/>
3  <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic""/>
4</aura:component>

次のクライアント側のコントローラは、いくつかのパラメータを使用して opts オブジェクトを作成し、ui:inputSelect コンポーネントで v.options を使用してオプションを生成します。v.options はオブジェクトのリストを取得し、リストオプションに変換します。このサンプルコードは初期化中にオプションを生成しますが、オプションのリストは v.options でリストを操作するときにいつでも変更できます。コンポーネントは自動的に更新され、新しいオプションが表示されます。

1({
2    doInit : function(cmp) {
3        var opts = [
4            { class: "optionClass", label: "Option1", value: "opt1"},
5            { class: "optionClass", label: "Option2", value: "opt2" },
6            { class: "optionClass", label: "Option3", value: "opt3" }
7           
8        ];
9        cmp.find("InputSelectDynamic").set("v.options", opts);
10    }
11})

class は、古いバージョンの Internet Explorer では動作しない可能性がある予約語です。二重引用符で囲んだ "class" を使用することをお勧めします。

メモ

リストオプションでは次のパラメータを使用できます。

パラメータ	型	説明
class	String	オプションの CSS クラス。
disabled	Boolean	オプションが無効化されているかどうかを示します。
label	String	ユーザインターフェースに表示するオプションの表示ラベル。
selected	Boolean	オプションが選択されているかどうかを示します。
value	String	必須。オプションの値。

複数のリストでのオプションの使用

複数のドロップダウンリストで同じオプションセットを再利用する場合は、各オプションセットで異なる属性を使用します。この操作を行わないと、1 つのリストで異なるオプションを選択したときに、他のリストのオプションも同じ属性に更新されます。

1<aura:attribute name="options1" type="String" />
2<aura:attribute name="options2" type="String" />
3<ui:inputSelect aura:id="Select1" label="Select1" options="{!v.options1}" />
4<ui:inputSelect aura:id="Select2" label="Select2" options="{!v.options2}" />

イベントの操作

ui:inputSelect の共通イベントには、change イベントと click イベントがあります。たとえば、change="{!c.onSelectChange}" では、ユーザが選択を変更したときに、関数名 onSelectChange を使用してクライアント側のコントローラアクションがコールされます。

項目レベルのエラーのスタイル設定

ui:inputSelect コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。次の CSS サンプルは、ドロップダウンメニューに固定幅を追加します。

1.THIS.uiInputSelect {
2    width: 200px;
3    height: 100px;
4}

または、class 属性を使用して独自の CSS クラスを指定します。

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