ui:inputSelect | Lightning コンポーネント開発者ガイド

ui:inputSelect コンポーネントは、HTML select 要素として表示されます。ui:inputSelectOption コンポーネントで表されるオプションが含まれます。複数選択を有効にするには、multiple="true" を設定します。入力値選択時のクライアント側のロジックを関連付けるには、change イベントを使用します。

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

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

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

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

1<aura:attribute name="contactLevel" type="String[]" default="Primary Contact, Secondary Contact, Other"/>
2    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}">
3        <aura:iteration items="{!v.contactLevel}" var="level">
4             <ui:inputSelectOption text="{!level}" label="{!level}"/>
5        </aura:iteration>
6    </ui:inputSelect>

選択したオプションが変更されると、次のクライアント側のコントローラで新しいテキスト値が取得されます。

1onSelectChange : function(component, event, helper) {
2    var selected = component.find("levels").get("v.value");
3    //do something else
4}

動的なオプションの生成

コントローラ側のアクションを使用して、コンポーネントの初期化時に動的にオプションを生成します。

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>

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

1({
2    doInit : function(cmp) {
3        var opts = [
4            { class: "optionClass", label: "Option1", value: "opt1", selected: "true" },
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" を使用することをお勧めします。複数のドロップダウンリストで同じオプションセットを再利用する場合は、各オプションセットで異なる属性を使用します。この操作を行わないと、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 コンポーネントの選択値を取得します。

1<aura:component>
2<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
3
4<div class="row">
5<p class="title">Single Selection</p>
6<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.onSingleSelectChange}">
7
8            <ui:inputSelectOption text="Any"/>
9            <ui:inputSelectOption text="Open" value="true"/>
10            <ui:inputSelectOption text="Closed"/>
11            <ui:inputSelectOption text="Closed Won"/>
12         <ui:inputSelectOption text="Prospecting"/>
13            <ui:inputSelectOption text="Qualification"/>
14            <ui:inputSelectOption text="Needs Analysis"/>
15            <ui:inputSelectOption text="Closed Lost"/>
16    </ui:inputSelect>
17    <p>Selected Item:</p>
18      <p><ui:outputText class="result" aura:id="singleResult" value="" /></p>
19</div>    
20
21<div class="row">
22    <p class="title">Multiple Selection</p>
23    <ui:inputSelect multiple="true" class="multiple" aura:id="InputSelectMultiple" change="{!c.onMultiSelectChange}">
24
25            <ui:inputSelectOption text="Any"/>
26            <ui:inputSelectOption text="Open"/>
27            <ui:inputSelectOption text="Closed"/>
28            <ui:inputSelectOption text="Closed Won"/>
29            <ui:inputSelectOption text="Prospecting"/>
30            <ui:inputSelectOption text="Qualification"/>
31            <ui:inputSelectOption text="Needs Analysis"/>
32            <ui:inputSelectOption text="Closed Lost"/>
33
34    </ui:inputSelect>
35    <p>Selected Items:</p>
36     <p><ui:outputText class="result" aura:id="multiResult" value="" /></p>
37</div>
38
39<div class="row">
40   <p class="title">Dynamic Option Generation</p>
41   <ui:inputSelect label="Select me: " class="dynamic" aura:id="InputSelectDynamic" change="{!c.onChange}" />
42   <p>Selected Items:</p>
43   <p><ui:outputText class="result" aura:id="dynamicResult" value="" /></p>
44</div>
45  
46</aura:component>

1({
2    doInit : function(cmp) {
3    	// Initialize input select options
4        var opts = [
5            { "class": "optionClass", label: "Option1", value: "opt1", selected: "true" },
6            { "class": "optionClass", label: "Option2", value: "opt2" },
7            { "class": "optionClass", label: "Option3", value: "opt3" }
8
9        ];
10        cmp.find("InputSelectDynamic").set("v.options", opts);
11        
12    },
13
14	onSingleSelectChange: function(cmp) {
15         var selectCmp = cmp.find("InputSelectSingle");
16         var resultCmp = cmp.find("singleResult");
17         resultCmp.set("v.value", selectCmp.get("v.value"));
18	 },
19
20	 onMultiSelectChange: function(cmp) {
21         var selectCmp = cmp.find("InputSelectMultiple");
22         var resultCmp = cmp.find("multiResult");
23         resultCmp.set("v.value", selectCmp.get("v.value"));
24	 },
25	 
26	 onChange: function(cmp) {
27		 var dynamicCmp = cmp.find("InputSelectDynamic");
28		 var resultCmp = cmp.find("dynamicResult");
29		 resultCmp.set("v.value", dynamicCmp.get("v.value"));
30	 }
31	 
32})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`multiple`	Boolean	入力が複数選択かどうかを指定します。デフォルト値は「false」です。
`options`	List	aura.components.ui.InputOption のリスト。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	String	現在、値は入力項目にあります。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。
`select`	COMPONENT	ユーザが選択を行ったことを示します。
`blur`	COMPONENT	コンポーネントからフォーカスが離れたことを示します。
`focus`	COMPONENT	コンポーネントにフォーカスが置かれたことを示します。
`keypress`	COMPONENT	ユーザがキーボードキーを押したままにしたことを示します。
`keyup`	COMPONENT	ユーザがキーボードキーを放したことを示します。
`keydown`	COMPONENT	ユーザがキーボードキーを押してから放したことを示します。
`cut`	COMPONENT	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。