Dynamic Multi-Select Picklist in Lightning Web Component (LWC)
This article explains how to dynamically add selected values from one multi-select picklist (Dual Listbox) to another multi-select picklist as options in a Lightning Web Component (LWC).
The sample LWC component has two “lightning-dual-listbox”, first where the user will select options and the second which will automatically get options from the user’s selected value.
HTML
<template>
<div class="background">
<lightning-card title="Multi-select Picklist using lightning-dual-listbox" style = "width:1000px;height:1000px" class="background1">
<lightning-dual-listbox name="languages"
id="list1"
label="Select Languages01"
source-label="Available"
selected-label="Selected"
field-level-help="Select your preferred languages"
options={options}
onchange={handleChange}></lightning-dual-listbox>
<br/>
<div class="slds-box" >
<p>Selected values are: {selected}</p>
</div>
<lightning-dual-listbox name="test"
id="list2"
label="Select Languages2"
source-label="Available2"
selected-label="Selected2"
field-level-help="Select your preferred languages 2"
options={selectitems}
></lightning-dual-listbox>
</lightning-card>
</div>
</template>JavaScript
import { LightningElement, wire, track } from 'lwc';
export default class PassingValuestoMultiselectPicklistsLWC extends LightningElement {
lstSelected = [];
_selected = [];
@track selectitems = [];
get options() {
return [
{ label: 'English', value: 'en' },
{ label: 'German', value: 'de' },
{ label: 'Spanish', value: 'es' },
{ label: 'French', value: 'fr' },
{ label: 'Italian', value: 'it' },
{ label: 'Japanese', value: 'ja' },
];}
get selected() {
return this._selected.length ? this._selected : 'none';
}
handleChange(event) {
var slect=[];
this._selected = event.detail.value;
var options=event.target.options;
var details=event.detail;
var i,j;
for(i=0;i<options.length;i++){
for(j=0;j<details.value.length;j++){
if(options[i].value==details.value[j]){
slect.push(options[i]);
}
}
}
this.selectitems=slect;
}
}- options={options} will contain pre-populated values and display options in the first list.
- this._selected = event.detail.value; selected values will be stored in _selected.
- Further on iterate over all the options from the list and match with the “selected values”, if values match it goes as options to the second list : this.selectitems=slect;
- options={selectitems} will show values selected by user dynamically
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>About the Author
Sonali Pareek
Sonali Pareek is a 8x Certified Salesforce Technical Lead with more than 6 years experience in Apex, Visualforce, Aura & Lightning Web Components development.
