Creating Dependent Picklists in Lightning Components

Hello There! Welcome Back 🙂
Hope you are doing great 😀

Today we are going to Create Dependent Picklists in Lightning Components.

The below tutorial video shows detailed steps to create Create Dependent Picklists in Lightning Components.


<aura:component >
    <aura:attribute name="parentOptions" type="List"/>
    <aura:attribute name="dependentPicklist" type="Object"/>
    <aura:attribute name="dependentOptions" type="List"/>
    <aura:attribute name="disabledPick" type="Boolean" default="true"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <div class="slds-container--center slds-container--small slds-m-top--small">
        <div class="slds-form--stacked">
            
            <lightning:select name="parentPicklist" label="Country" aura:id="parentPicklist" onchange="{!c.PickChange}">
                <option value="">None</option>
                <aura:iteration items="{!v.parentOptions}" var="p">
                    <option value="{!p.value}">{!p.text}</option>
                </aura:iteration>
            </lightning:select>
            
            <lightning:select name="dependentPicklist" label="Cities" disabled="{!v.disabledPick}">
                <option value="">None</option>
                <aura:iteration items="{!v.dependentOptions}" var="d">
                    <option value="{!d.value}">{!d.text}</option>
                </aura:iteration>
            </lightning:select>
            
        </div>        
    </div>
    
</aura:component>
({
    doInit : function(component, event, helper) {
        var pVals = [
            {text:"India", value: "India"},
            {text:"USA", value: "USA"}
        ];

        var dPick = {
            "India" : [
                {text:"Hyderabad", value: "Hyderabad"},
                {text:"Chennai", value: "Chennai"}
            ],
            "USA" : [
                {text:"San Francisco", value: "San Francisco"},
                {text:"Chicago", value: "Chicago"}
            ]
        };

        component.set('v.parentOptions', pVals);
        component.set('v.dependentPicklist', dPick);

    },

    PickChange : function(component, event, helper) {
        var parentValue = component.find('parentPicklist').get('v.value');
        component.set('v.dependentOptions', component.get('v.dependentPicklist')[parentValue]);

        if(parentValue != '')
        component.set('v.disabledPick',false);
        else
        component.set('v.disabledPick',true);
    }
})

That is it! We learnt how to Create Dependent Picklists in Lightning Components.
Cool one, Right?

I have also created a demo lightning app so that you can play around with it yourself: https://minerva18ltng-developer-edition.ap2.force.com/Demos/c/DependentPicklistApp.app

If you like the content, give it some sharing 🙂

Happy Coding 😀
For more Salesforce Dev Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Please do let me know if you have any questions in the comments section below or by emailing me at minerva18dotcom@gmail.com
Thank you, See you in the next one & Peace 😀


Stay update with our latest posts by subscribing to our newsletter. It is free!




4 thoughts on “Creating Dependent Picklists in Lightning Components”

Leave a Reply

Your email address will not be published.