How to split values from multiple picklist to dropdown value in salesforce LWC

[vijayk3327]

In this post we are going to learn about How to split values from multiple picklist to dropdown value in salesforce LWC.

A Picklist provides a user with an select-only component that is functionally similar to an HTML select element. It is accompanied with a listbox of pre-defined options. A picklist has both single and multi-selection patterns.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lookupFieldValueLwc.html

`

        <div class="slds-col slds-size_6-of-12">
            <div class="slds-form-element">               
                <div class="slds-form-element_controller">
                   <lightning-record-edit-form object-api-name="Contact">
                       <lightning-input-field field-name="AccountId" data-type="input-field" value={accountId} name="accountId" onchange={handleChangeAction}>
                       </lightning-input-field>
                   </lightning-record-edit-form>   
                </div>
            </div>
        </div>

        <div class="slds-col slds-size_6-of-12">
            <div class="slds-form-element">               
                <div class="slds-form-element_controller">
                   <lightning-record-edit-form object-api-name="Contact">
                       <lightning-input-field field-name="ReportsToId" data-type="input-field" value={reportsToId} name="reportsToId" onchange={handleChangeAction}>
                       </lightning-input-field>
                   </lightning-record-edit-form>   
                </div>
            </div>
        </div>

     </div>
</lightning-card>

`

Step 2:- Create Lightning Web Component : lookupFieldValueLwc.js

` import { LightningElement,track, api } from 'lwc';

export default class LookupFieldValueLwc extends LightningElement {
@track accountId ;
@track reportsToId;

handleChangeAction(event){
    if(event.target.name == 'accountId'){
        this.accountId = event.target.value;  
        //window.console.log('accountId ##' + this.accountId);
        if(this.accountId == '0015g00000y2ZQEAA2')
        {
            this.reportsToId = '0035g00000FroJAAAZ';
        }else{
            this.reportsToId = '';
        }
        
    }
    if(event.target.name == 'reportsToId'){
        this.reportsToId = event.target.value;  
        window.console.log('reportsToId ##' + this.reportsToId);
    }
}

}`

Step 3:- Create Lightning Web Component : lookupFieldValueLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>56.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

→ Get source code live demo link:-