Hello, can anyone tell how can we preselect values in lightning dual listbox LWC?

Question

I am getting record from Apex class but not able to preset values.

first image is where you can see i get values of objective.

in second image i need to see those values in selected i have a list which i am iterating in custom table

code:

<lightning-dual-listbox data-id={cli.Id} name="Objectives" value={defaultValues} source-label="Available" selected-label="Selected" options={Combooptions} onchange={handleComboChange} size="3">
</lightning-dual-listbox>

get Combooptions() {
        return [
          {label: 'Prescription Drive', key: 'Prescription Drive', value: 'Prescription Drive' } ,
          {label: 'TOP Selling',key: 'TOP Selling', value: ' TOP Selling' } ,
          {label: 'Sample workload Drive',key: 'Sample workload Drive', value: 'Sample workload Drive' } ,
          {label: 'Client Conversion',key: 'Client Conversion', value: 'Client Conversion' } ,
          {label: 'Payment & collection',key: 'Payment & collection', value: 'Payment & collection' } ,
          {label: 'Wellness Drive',key: 'Wellness Drive', value: 'Wellness Drive' } ,
          {label: 'CME/RTM', key: 'CME/RTM', value: 'CME/RTM' } ,
          {label: 'Query Handling',key: 'Query Handling', value: 'Query Handling' } ,
          {label: 'Others', key: 'Others', value: 'Others' } ,
        ];
    }


        handleComboChange (event) 
    {
        let starttime = event.target.value;
        let selectedRow1 = event.currentTarget;
        let recordID = selectedRow1.dataset.id;
            var select=[];
           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]) 
                    {
                        select.push(options[i].value);
                    }
                }
            }
            this.selectitems=select;
            console.log('selectitems--'+JSON.stringify(this.selectitems));
            const str = this.selectitems.join(';');
            let audioUrl = ""+ str+ "";     
            
            var __FOUND;
            var __FOUND = this.allClients.filter((cli, index) => {      
        
                if (cli.Id === recordID) {
                    cli.MHL_Objectives__c = audioUrl;
                    this.lineItemtosave.push(cli);

                    return true;
                }
        
            });
        
    }

Answer 1

I don't see the code where you are setting the defaultValues, either way you can follow the below approach works for me -

options =[{label: 'Prescription Drive', key: 'Prescription Drive', value: 'PrescriptionDrive' },
          {label: 'TOP Selling', key: 'TOP Selling', value: ' TOPSelling' },
          {lbel: 'Sample workload Drive', key: 'Sample workload Drive', value: 'SampleworkloadDrive' },
          {label: 'Client Conversion', key: 'Client Conversion', value: 'Client Conversion' },
          {label: 'Payment & collection',key: 'Payment & collection', value: 'Payment & collection' } ,
          {label: 'Wellness Drive', key: 'Wellness Drive', value: 'WellnessDrive' },
          {label: 'CME/RTM', key: 'CME/RTM', value: 'CME/RTM' },
          {label: 'Query Handling', key: 'Query Handling', value: 'Query Handling' },
          {label: 'Others', key: 'Others', value: 'Others' }];

values=[];

 connectedCallback() {
        this.values=[];
        this.values.push(...['PrescriptionDrive', 'WellnessDrive', 'SampleworkloadDrive']);
    }

 <lightning-dual-listbox name="languages"
                            label="Select Options"
                            source-label="Available"
                            selected-label="Selected"
                            field-level-help="This is a dual list box"
                            options={options}
                            value={values}></lightning-dual-listbox>

In the values array you need to pass the options value key i.e. {label: 'Prescription Drive', key: 'Prescription Drive', value: 'PrescriptionDrive' }, not any other key value.

You can follow more at - https://developer.salesforce.com/docs/component-library/bundle/lightning-dual-listbox/example