Tag Archives: Combobox

Combobox in Lightning Component

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: