A ui:inputSelect component is rendered as an HTML select element. It contains options, represented by the ui:inputSelectOption components. To enable multiple selections, set multiple="true". To wire up any client-side logic when an input value is selected, use the change event.
<ui:inputSelect multiple="true"> <ui:inputSelectOption text="All Primary" label="All Contacts" value="true"/> <ui:inputSelectOption text="All Primary" label="All Primary"/> <ui:inputSelectOption text="All Secondary" label="All Secondary"/> </ui:inputSelect>
v.value represents the option's HTML selected attribute, and v.text represents the option's HTML value attribute.
Generating Options with aura:iterationYou can use aura:iteration to iterate over a list of items to generate options. This example iterates over a list of items and handles the change event.
<aura:attribute name="contactLevel" type="String[]" default="Primary Contact, Secondary Contact, Other"/> <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onSelectChange}"> <aura:iteration items="{!v.contactLevel}" var="level"> <ui:inputSelectOption text="{!level}" label="{!level}"/> </aura:iteration> </ui:inputSelect>
When the selected option changes, this client-side controller retrieves the new text value.
onSelectChange : function(component, event, helper) { var selected = component.find("levels").get("v.value"); //do something else }
Generate the options dynamically on component initialization using a controller-side action.
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <ui:inputSelect label="Select me:" class="dynamic" aura:id="InputSelectDynamic"/> </aura:component>
The following client-side controller generates options using the options attribute on the ui:inputSelect component. v.options takes in the list of objects and converts them into list options. The opts object constructs InputOption objects to create the ui:inputSelectOptions components within ui:inputSelect. Although the sample code generates the options during initialization, the list of options can be modified anytime when you manipulate the list in v.options. The component automatically updates itself and rerenders with the new options.
({ doInit : function(cmp) { var opts = [ { class: "optionClass", label: "Option1", value: "opt1", selected: "true" }, { class: "optionClass", label: "Option2", value: "opt2" }, { class: "optionClass", label: "Option3", value: "opt3" } ]; cmp.find("InputSelectDynamic").set("v.options", opts); } })
class is a reserved keyword that might not work with older versions of Internet Explorer. We recommend using "class" with double quotes. If you’re reusing the same set of options on multiple drop-down lists, use different attributes for each set of options. Otherwise, selecting a different option in one list also updates other list options bound to the same attribute.
<aura:attribute name="options1" type="String" /> <aura:attribute name="options2" type="String" /> <ui:inputSelect aura:id="Select1" label="Select1" options="{!v.options1}" /> <ui:inputSelect aura:id="Select2" label="Select2" options="{!v.options2}" />
This example displays a drop-down list with single and multiple selection enabled, and another with dynamically generated list options. It retrieves the selected value of a ui:inputSelect component.
<aura:component> <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <div class="row"> <p class="title">Single Selection</p> <ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.onSingleSelectChange}"> <ui:inputSelectOption text="Any"/> <ui:inputSelectOption text="Open" value="true"/> <ui:inputSelectOption text="Closed"/> <ui:inputSelectOption text="Closed Won"/> <ui:inputSelectOption text="Prospecting"/> <ui:inputSelectOption text="Qualification"/> <ui:inputSelectOption text="Needs Analysis"/> <ui:inputSelectOption text="Closed Lost"/> </ui:inputSelect> <p>Selected Item:</p> <p><ui:outputText class="result" aura:id="singleResult" value="" /></p> </div> <div class="row"> <p class="title">Multiple Selection</p> <ui:inputSelect multiple="true" class="multiple" aura:id="InputSelectMultiple" change="{!c.onMultiSelectChange}"> <ui:inputSelectOption text="Any"/> <ui:inputSelectOption text="Open"/> <ui:inputSelectOption text="Closed"/> <ui:inputSelectOption text="Closed Won"/> <ui:inputSelectOption text="Prospecting"/> <ui:inputSelectOption text="Qualification"/> <ui:inputSelectOption text="Needs Analysis"/> <ui:inputSelectOption text="Closed Lost"/> </ui:inputSelect> <p>Selected Items:</p> <p><ui:outputText class="result" aura:id="multiResult" value="" /></p> </div> <div class="row"> <p class="title">Dynamic Option Generation</p> <ui:inputSelect label="Select me: " class="dynamic" aura:id="InputSelectDynamic" change="{!c.onChange}" /> <p>Selected Items:</p> <p><ui:outputText class="result" aura:id="dynamicResult" value="" /></p> </div> </aura:component>
({ doInit : function(cmp) { // Initialize input select options var opts = [ { "class": "optionClass", label: "Option1", value: "opt1", selected: "true" }, { "class": "optionClass", label: "Option2", value: "opt2" }, { "class": "optionClass", label: "Option3", value: "opt3" } ]; cmp.find("InputSelectDynamic").set("v.options", opts); }, onSingleSelectChange: function(cmp) { var selectCmp = cmp.find("InputSelectSingle"); var resultCmp = cmp.find("singleResult"); resultCmp.set("v.value", selectCmp.get("v.value")); }, onMultiSelectChange: function(cmp) { var selectCmp = cmp.find("InputSelectMultiple"); var resultCmp = cmp.find("multiResult"); resultCmp.set("v.value", selectCmp.get("v.value")); }, onChange: function(cmp) { var dynamicCmp = cmp.find("InputSelectDynamic"); var resultCmp = cmp.find("dynamicResult"); resultCmp.set("v.value", dynamicCmp.get("v.value")); } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS style to be attached to the component. This style is added in addition to base styles output by the component. | |
disabled | Boolean | Specifies whether the component should be displayed in a disabled state. Default value is "false". | |
errors | List | The list of errors to be displayed. | |
label | String | The text of the label component | |
labelClass | String | The CSS class of the label component | |
multiple | Boolean | Specifies whether the input is a multiple select. Default value is “false”. | |
options | List | A list of options to use for the select. Note: setting this attribute will make the component ignore v.body | |
required | Boolean | Specifies whether the input is required. Default value is "false". | |
requiredIndicatorClass | String | The CSS class of the required indicator component | |
updateOn | String | Updates the component's value binding if the updateOn attribute is set to the handled event. Default value is "change". | |
value | String | The value currently in the input field. |
Event Name | Event Type | Description |
---|---|---|
dblclick | COMPONENT | The event fired when the user double-clicks the component. |
mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
click | COMPONENT | The event fired when the user clicks on the component. |
mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |
select | COMPONENT | The event fired when the user selects some text. |
blur | COMPONENT | The event fired when the user moves off from the component. |
focus | COMPONENT | The event fired when the user focuses on the component. |
keypress | COMPONENT | The event fired when the user presses or holds down a keyboard key on the component. |
keyup | COMPONENT | The event fired when the user releases a keyboard key on the component. |
keydown | COMPONENT | The event fired when the user presses a keyboard key on the component. |
cut | COMPONENT | The event fired when the user cuts content to the clipboard. |
onError | COMPONENT | The event fired when there are any validation errors on the component. |
onClearErrors | COMPONENT | The event fired when any validation errors should be cleared. |
change | COMPONENT | The event fired when the user changes the content of the input. |
copy | COMPONENT | The event fired when the user copies content to the clipboard. |
paste | COMPONENT | The event fired when the user pastes content from the clipboard. |