Dependent Picklist in LWC

The LWC provides LDS (Lightning Data Service) for essential data access from objects. We are fetching the data using the backend. Whereas we utilize the LDS feature to fetch the data as much as possible and also avoid fetching the data using the back end.

For example, if your component performs on the record page, you could use the objectinfo API to get the object picklist values.

dependentPickList.Html

<template>

                    <template if:true={showpicklist}>

                        <lightning-combobox label={controllerFieldLabel}

                            name={controllerFieldLabel}

                            options={controllingPicklist}

                            value={selectedControlling}

                            onchange={fetchDependentValue}

                            >

                        </lightning-combobox>

                       <lightning-combobox label={dependentFieldLabel}

                            name={dependentFieldLabel}

                            options={finalDependentVal}

                            value={selectedControlling}

                            disabled={dependentDisabled}>

                        </lightning-combobox>

                    </template>

    </template>

dependentPickList.js

import { LightningElement, wire, track , api } from ‘lwc’;

   import { getPicklistValuesByRecordType } from  

                                              ‘lightning/uiObjectInfoApi’;    

   export default class DependentPicklist extends LightningElement {

    @api objectApiName;

    @api objectRecordTypeId;

    @api controllerFieldApiName=’picklist__c’;

    @api controllerFieldLabel;

    @api dependentFieldApiName=’dependentPicklist__c’;

    @api dependentFieldLabel;

    @track controllerValue;

    @track dependentValue;

    controllingPicklist=[];

    dependentPicklist;

    @track finalDependentVal=[];

    @track selectedControlling=”–None–“;

    showpicklist = false;

    dependentDisabled=true;

    showdependent = false;

    @wire(getPicklistValuesByRecordType, { objectApiName:  

‘$objectApiName’, recordTypeId: ‘0125j000001NeFCAA0’ })

    fetchPicklist({error,data}){

        if(data && data.picklistFieldValues){

            let optionsValue = {}

            optionsValue[“label”] = “–None–“;

            optionsValue[“value”] = “”;

            this.controllingPicklist.push(optionsValue);data.picklistFieldValues[this.controllerFieldApiName].values.

forEach(optionData => {

                this.controllingPicklist.push({label : optionData.label,  

                                        value : optionData.value});

            });

            this.dependentPicklist = 

            data.picklistFieldValues[this.dependentFieldApiName];

            this.showpicklist = true;

        } else if(error){

            console.log(error);

        }

    }

    fetchDependentValue(event){

        this.dependentDisabled = true;

        this.finalDependentVal=[];

        this.showdependent = false;

        const selectedVal = event.target.value;

        this.controllerValue = selectedVal;

        this.finalDependentVal.push({label : “–None–“, value : “”})

        let controllerValues = this.dependentPicklist.controllerValues;

        this.dependentPicklist.values.forEach(depVal => {

            depVal.validFor.forEach(depKey =>{

                if(depKey === controllerValues[selectedVal]){

                    this.dependentDisabled = false;

                    this.showdependent = true;

this.finalDependentVal.push({label : depVal.label, 

                                                 value : depVal.value});

                }

            });

        });

    }

    }

Output: