Creating Dependent Picklists in Lightning Aura 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.

DependentPicklist.cpm

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

DependentPicklist.js

({
   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 learned how to Create Dependent Picklists in Lightning Components.
Cool one, Right?