Skip to content

Dynamic Multi-Select Picklist in Lightning Web Component

Dynamic Multi-Select Picklist in Lightning Web Component (LWC)

LWC Multi-Select Picklist

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; 
    }
}
  1. options={options} will contain pre-populated values and display options in the first list.
  2. this._selected = event.detail.value; selected  values will be stored in _selected.
  3. 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;
  4. 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

Sonali Pareek is a 8x Certified Salesforce Technical Lead with more than 6 years experience in Apex, Visualforce, Aura & Lightning Web Components development.


Recommend Articles

Share this article...

Please Leave a Comment

error: Content is protected !!

Discover more from DYDC

Subscribe now to keep reading and get access to the full archive.

Continue reading