How to split values from multiple picklist to dropdown value in salesforce LWC | Split and display multiple picklist value into single dropdown value in LWC | How to Split a String into an Array in LWC JS | Split string with picklist value in lwc JS Salesforce

Hey guys, today 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. To know more details about Picklist, Click Here.

Don’t forget to check out:- How to display selected multiple picklist value move left/right from one box to another dual-listbox of dropdown picklist based on button icon to reordered as up/down of selected picklist option uses of ‘lightning-dual-listbox’ element in LWC Click Here For More Information

Final Output

👉 Download Ebook →

👉 Download App from Google Play →

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create Lightning Web Component HTML

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

SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.html

splitMultipicklistLwc.html [Lightning Web Component HTML]

```
  <template>
```
```
 
```

    <lightning-card title="Split and display multiple picklist value in lwc ">

```
 
```

        <table border="0" cellspacing="0" cellpadding="0" class="slds-table slds-table_bordered slds-table_col-bordered" style="border-collapse:collapse;">

            <tr for:each={oppItemArr} for:item='recItem' key={rowId} for:index='index' >

```
                <td>
```

                    <div class="slds-form-element_controller">

                        <select style="margin-top: 15px;" class="slds-select" data-id={indx} name="Dev_App__c"  required>

                            <option  value="--None--">--None--</option>

                                <template for:each={devAppOption} for:item="Itm">

                                 <option key={Itm.Id} id={Itm.id} value={Itm}>{Itm}</option>

                            </template>

```
                      </select>
```
```
                    </div>
```
```
                </td>
```
```
 
```
```
             </tr>
```
```
        </table>   
```
```
    </lightning-card>
```
```
 
```
```
 
```
```
</template>
```

Create Lightning Web Component JavaScript

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

✪ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
👉 So Don't MISS it... (Access Right Now)
👉 Get Huge Discount Offer 50%: - Get eBook

SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.js

splitMultipicklistLwc.js [LWC JavaScript File]

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

import getOptRec from '@salesforce/apex/fetchRecordByIdLwcCtrl.getOptRec';

export default class SplitMultipicklistLwc extends LightningElement {

```
 
```
```
    //Start ConnectedCallback
```
```
 
```
```
    connectedCallback() {
```
```
 
```
```
    }
```
```
 
```
```
   //End ConnectedCallback
```
```
 
```
```
@api recordId; 
```
```
    @track oppItemArr=[];
```
```
    @track devAppOption;
```
```
 
```
```
 
```

    @wire(getOptRec,{recId:'$recordId'})

```
    getInfos({error,data}){
```
```
        if(error){
```

            console.log('error == '+JSON.stringify(error));

```
        }else if(data){
```

            console.log('data == ', JSON.stringify(data));

            this.oppItemArr = JSON.parse(JSON.stringify(data));

```
 
```
```
 
```
```
 
```
```
          //Start split multipiclist
```

        if(data.length >0 && data[0].Dev_App__c != undefined){

            let devAppVal =  data[0].Dev_App__c;

            if(devAppVal !== null && devAppVal !== undefined && devAppVal !== ''){

                devAppVal =  devAppVal.split(";");

                console.log('verticalOption2# ' +  devAppVal);

                this.devAppOption = devAppVal;

                console.log('thisVrt ' + this.devAppOption);

```
 
```
```
            }
```
```
        }
```
```
 
```
```
        //End split multipiclist
```
```
 
```
```
 
```
```
        }
```
```
 
```
```
    }
```
```
 
```
```
 
```
```
}
```

Create Lightning Web Component Meta XML

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

SFDX:Lightning Web Component >> New >> splitMultipicklistLwc.js-meta.xml

splitMultipicklistLwc.js-meta.xml [LWC Meta Data 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>
```

Step 4:- Create Apex Controller : fetchRecordByIdLwcCtrl.cls

SFDX:Create Apex Class >> New >> fetchRecordByIdLwcCtrl.cls

fetchRecordByIdLwcCtrl.cls [Apex Class]

  public WITH sharing class fetchRecordByIdLwcCtrl {

```
 
```
```
    @AuraEnabled(cacheable=TRUE)
```

    public static List<Opportunity> getOptRec(Id recId){

        List<Opportunity> optRecItem = [SELECT Id, Name,  Dev_App__c FROM Opportunity WHERE Id=:recId];

```
        RETURN optRecItem;
```
```
    }
```
```
 
```
```
 
```
```
}
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link – YouTube

FAQ (Frequently Asked Questions)

How to split a variable value in JavaScript?

The split() method splits a string into an array of substrings. The split() method returns the new array. The split() method does not change the original string. If ('') is used as separator, the string is split between words.

What is split () in JavaScript?

The split() method takes a pattern and divides a String into an ordered list of substrings by searching for the pattern, puts these substrings into an array, and returns the array.

How does split () work?

The split() function works by scanning the given string or line based on the separator passed as the parameter to the split() function. In case the separator is not passed as a parameter to the split() function, the white spaces in the given string or line are considered as the separator by the split() function.

How to split values from multiple picklist to dropdown value in salesforce LWC | Split and display multiple picklist value into single dropdown value in LWC | How to Split a String into an Array in LWC JS | Split string with picklist value in lwc JS Salesforce

Create Lightning Web Component HTML

splitMultipicklistLwc.html [Lightning Web Component HTML]

Create Lightning Web Component JavaScript

splitMultipicklistLwc.js [LWC JavaScript File]

Create Lightning Web Component Meta XML

splitMultipicklistLwc.js-meta.xml [LWC Meta Data XML]

fetchRecordByIdLwcCtrl.cls [Apex Class]

How to split a variable value in JavaScript?

What is split () in JavaScript?

How does split () work?

Related Topics | You May Also Like

Vijay Kumar

Create Lightning Web Component HTML

splitMultipicklistLwc.html [Lightning Web Component HTML]

Create Lightning Web Component JavaScript

splitMultipicklistLwc.js [LWC JavaScript File]

Create Lightning Web Component Meta XML

splitMultipicklistLwc.js-meta.xml [LWC Meta Data XML]

fetchRecordByIdLwcCtrl.cls [Apex Class]

How to split a variable value in JavaScript?

What is split () in JavaScript?

How does split () work?

Related Topics | You May Also Like

Vijay Kumar

Leave a Comment Cancel reply

👉 View Details..