Combobox in Lightning Component – Biswajeet Samal's Blog

Sample Lightning Component:

<!--Sample.app-->
<aura:component>
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-m-around_xx-large">
        <!--Combobox Component-->
        <lightning:combobox aura:id="selectItem" name="status" label="Case Status"
                            placeholder="Case Status"
                            value="new"
                            onchange="{!c.handleOptionSelected}"
                            options="{!v.statusOptions}"/>
    </div>
</aura:component>

Sample Lightning Component JS Controller:

({
    doInit: function (component, event, helper) {
        var options = [
            { value: "new", label: "New" },
            { value: "Working", label: "Working" },
            { value: "Escalated", label: "Escalated" },
            { value: "Closed", label: "Closed" }
        ];
        component.set("v.statusOptions", options);
    },
    handleOptionSelected: function (cmp, event) {
        //Get the string of the "value" attribute on the selected option
        var selectedValue = event.getParam("value");
        alert("Selected Option: '" + selectedValue + "'");
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

Keyur Virani

How to get aura:Id of combobox from change event?
Sai Venkat Prakash

How to fetch the Label of the selected option ? .If i use event.getParam(“value”); i can get the value but how can i get the label of the option ?
Sai Kumar

Is it possible to search n select picklist values by entering values?
Snehal Killekar

Thanks for the post. Can we pass custom List to combobox? here, custom list means, List of records we are getting from Apex controller.
- Biswajeet Samal
  
  Yes you can, but that list should be “value” and “label” pair list.
  - Snehal Killekar
    
    Okay, got it. thanks.