How to create Dependent Picklist Using lightning Component and change background Color

Hi Folks,

As it is rightly said "The more you share , the more you learn". With this thought I ll keep exploring and ll keep sharing some basic stuff for lightning beginners.

Lets jump to scenario first:-

We need to create Dependent Picklist using Lightning Component, Sounds very easy isn't it . Hold on there is a twist to it we need to change the background color based on selected value.

Lets get started:-
Firstly , we need to have attribute to hold parent picklist value i.e

<aura:attribute name="pOptions" type="List"/>

Step 2 :-

<lightning:select name="pPicklist"  label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
            <option value="">None</option>
            <aura:iteration items="{!v.pOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>

This actually is creating  the parent picklist which is a list of alphabets. It has a onchange controller.

 myAction : function(component, event, helper) {
        var pVals = [
            {text:"A", value:"A"},
            {text:"B", value:"B"}
        ];
        var pValsColor = [
            {text:"White", value:"White"},
            {text:"blue", value:"blue"}
        ];
        var cVals = {
            "A":[
                {text:"A1", value:"A1"},
                //{text:"Choose Color", value:"Choose Color"}
            ],
                "B":[
                {text:"B1", value:"B1"},
                {text:"Choose Color", value:"Choose Color"}
            ]
        };
        component.set('v.pOptions',pVals);
        component.set('v.DepenedentObject',cVals);
        component.set('v.cColor',pValsColor)
    },

This controller is  called whenever the page is loaded and it sets the initial values to picklist.


Step 3:-
Now, we have to create child picklist values.

<div class="slds-form--stacked">
            <lightning:select name="cPicklist"  label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
                <option value="">None</option>
                <aura:iteration items="{!v.cOptions}" var="k">
                    <option value="{!k.value}">{!k.text}</option>
                </aura:iteration>
            </lightning:select>
        </div>
            <div class="slds-form--stacked">
        <lightning:select name="cPicklistColor"  label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.cColor}" var="k">
                <option value="{!k.value}">{!k.text}</option>
            </aura:iteration>
        </lightning:select>

This above code is creating the child picklist and also has onchange.





Here is full code for you below to test and try:- 

<aura:component >
    <ltng:require styles="{!$Resource.slds232 + '/assets/styles/salesforce-lightning-design-system.css'}"/>
    <aura:attribute name="pOptions" type="List"/>
    <aura:attribute name="cOptions" type="List"/>
    <aura:attribute name="selectedRedColor" type="Boolean" default="false"/>
    <aura:attribute name="cColor" type="List"/>
    <aura:attribute name="DepenedentObject" type="object"/>
    <aura:attribute name="disabledPick" type="Boolean" default="true"/>
    <aura:attribute name="disabledColorPick" type="Boolean" default="true"/>
    <aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
    
    <div class="slds-align_absolute-center">
        <lightning:select name="pPicklist"  label="Alphabets" aura:id="pPicklistId" onchange="{!c.onPickchange}">
            <option value="">None</option>
            <aura:iteration items="{!v.pOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>
        <div class="slds-form--stacked">
            <lightning:select name="cPicklist"  label="Childs" aura:id="cPicklist" disabled="{!v.disabledPick}" onchange="{!c.myColor}">
                <option value="">None</option>
                <aura:iteration items="{!v.cOptions}" var="k">
                    <option value="{!k.value}">{!k.text}</option>
                </aura:iteration>
            </lightning:select>
        </div>
            <div class="slds-form--stacked">
        <lightning:select name="cPicklistColor"  label="Color" aura:id="cPicklistColor" onchange="{!c.myColor}" disabled="{!v.disabledColorPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.cColor}" var="k">
                <option value="{!k.value}">{!k.text}</option>
            </aura:iteration>
        </lightning:select>
    </div>
    <div class="slds-is-relatived" style="position: absolute; top: 1rem; left: 1rem;">
        <aura:if isTrue="{!v.selectedRedColor}">
            <style >
                html{
                background-color: blue ;
                }
                
            </style>
            <p class="slds-text-color_default"> Show Color :-  I am Blue  </p>
        </aura:if>
        
    </div>
    </div>

</aura:component>

Lets now take a look at controller :-

({
    myAction : function(component, event, helper) {
        var pVals = [
            {text:"A", value:"A"},
            {text:"B", value:"B"}
        ];
        var pValsColor = [
            {text:"White", value:"White"},
            {text:"blue", value:"blue"}
        ];
        var cVals = {
            "A":[
                {text:"A1", value:"A1"},
                //{text:"Choose Color", value:"Choose Color"}
            ],
                "B":[
                {text:"B1", value:"B1"},
                {text:"Choose Color", value:"Choose Color"}
            ]
        };
        component.set('v.pOptions',pVals);
        component.set('v.DepenedentObject',cVals);
        component.set('v.cColor',pValsColor)
    },
    onPickchange : function(component, event, helper) {
        var cValues = component.find('pPicklistId').get('v.value');
        component.set('v.cOptions',component.get('v.DepenedentObject')[cValues]);
        //alert(cValues);
        console.log(component.get('v.DepenedentObject')[cValues]);
        if(cValues != '')
            component.set('v.disabledPick',false);
        else
            component.set('v.disabledPick',true);
    },
    
    myColor : function(component, event, helper) {
        //alert('function called');
        var cValuesColor = component.find('cPicklist').get('v.value');
        var sColor = component.find('cPicklistColor').get('v.value');
        //alert(sColor);
        if(sColor == 'blue'){
           // alert(sColor);
            component.set('v.selectedRedColor',true);
        }
        else{
            //alert(sColor);
            component.set('v.selectedRedColor',false);
        }
        if(cValuesColor == 'Choose Color')
            component.set('v.disabledColorPick',false);
        else if(cValuesColor != 'Choose Color'){
            component.set('v.disabledColorPick',true);
        }
    }
    
})

Click below to see 
Working demo on You tube

In case you find any issue just drop me a mail on ankushsalesforce@gmail.com


Happy Codding
Cheers !!

Thanks
Ankush