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 Free Ebook →

👉 Get Free Course →

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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]

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

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

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.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net