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」です。
`errors`	List	表示するエラーのリスト。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`multiple`	Boolean	入力が複数選択かどうかを指定します。デフォルト値は「false」です。
`options`	List	選択で使用するオプションのリスト。メモ: この属性を設定すると、コンポーネントは v.body を無視します。
`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	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。