Lightning コンポーネント開発者ガイド
jドロップダウンリスト
ドロップダウンリストには、選択可能なオプションを含むドロップダウンメニューが表示されます。単一選択と複数選択の両方がサポートされています。ドロップダウンリストを作成するには、ui:input から動作とイベントを継承する ui:inputSelect を使用します。
ドロップダウンリストを設定するいくつかの基本的な方法を次に示します。
複数選択の場合、multiple 属性を true に設定します。
- 単一選択
-
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<ui:inputSelect> 18 <ui:inputSelectOption text="Red"/> 19 <ui:inputSelectOption text="Green" value="true"/> 20 <ui:inputSelectOption text="Blue"/> 21</ui:inputSelect> - 複数選択
-
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<ui:inputSelect multiple="true"> 18 <ui:inputSelectOption text="All Primary" label="All Contacts" value="true"/> 19 <ui:inputSelectOption text="All Primary" label="All Primary"/> 20 <ui:inputSelectOption text="All Secondary" label="All Secondary"/> 21</ui:inputSelect>
デフォルトの選択値は、value="true" で指定されます。各オプションは ui:inputSelectOption で表されます。
aura:iteration によるオプションの生成
オプションを生成するには、aura:iteration を使用して項目のリストを反復処理します。次の例では、項目のリストを反復処理し、条件に応じてオプションを表示します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:attribute name="contacts" type="String[]" default="All Contacts,Others"/>
18<ui:inputSelect>
19 <aura:iteration items="{!v.contacts}" var="contact">
20 <aura:if isTrue="{!contact == 'All Contacts'}">
21 <ui:inputSelectOption text="{!contact}" label="{!contact}"/>
22 <aura:set attribute="else">
23 <ui:inputSelectOption text="All Primary" label="All Primary"/>
24 <ui:inputSelectOption text="All Secondary" label="All Secondary"/>
25 </aura:set>
26 </aura:if>
27 </aura:iteration>
28</ui:inputSelect>動的なオプションの生成
コンポーネントの初期化時に動的にオプションを生成します。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <aura:handler name="init" value="{!this} action="{!c.doInit}"/>
19 <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic""/>
20</aura:component>次のクライアント側のコントローラは、ui:inputSelect コンポーネントで options 属性を使用してオプションを生成します。v.options はオブジェクトのリストを取得し、リストオプションに変換します。このサンプルコードは初期化中にオプションを生成しますが、オプションのリストは v.options でリストを操作するときにいつでも変更できます。コンポーネントは自動的に更新され、新しいオプションが表示されます。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18 doInit : function(cmp) {
19 var opts = [
20 { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
21 { class: "optionClass", label: "Option2", value: "opt2" },
22 { class: "optionClass", label: "Option3", value: "opt3" }
23
24 ];
25 cmp.find("InputSelectDynamic").set("v.options", opts);
26 }
27})上記のデモの opts オブジェクトは、ui:inputSelect 内に ui:inputSelectOptions コンポーネントを作成する InputOption オブジェクトを構築します。
InputOption オブジェクトには次のパラメータがあります。
| パラメータ | 型 | 説明 |
|---|---|---|
| label | String | ユーザインターフェースに表示するオプションの表示ラベル。 |
| name | String | オプションの名前。 |
| selected | boolean | オプションが選択されているかどうかを示します。 |
| value | String | このオプションの値。 |
イベントの操作
ui:inputSelect の共通イベントには、change イベントと click イベントがあります。たとえば、change="{!c.onSelectChange}" では、ユーザが選択を変更したときに、関数名 onSelectChange を使用してクライアント側のコントローラアクションがコールされます。
項目レベルのエラーのスタイル設定
ui:inputSelect コンポーネントは、通常の CSS スタイル設定を使用してカスタマイズできます。次の CSS サンプルは、ドロップダウンメニューに固定幅を追加します。
1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.uiInputSelect {
18 width: 200px;
19 height: 100px;
20}または、class 属性を使用して独自の CSS クラスを指定します。