ui:inputSelect

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.

v.value represents the option's HTML selected attribute, and v.text represents the option's HTML value attribute.

You 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.

When the selected option changes, this client-side controller retrieves the new text value.

Generate the options dynamically on component initialization using a controller-side action.

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.

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.