The attached image is an LWC, in which Category is a controlling picklist (Combobox) and Sub Categ is the Dependent Picklist.

Eg. Category 1: Sub Categ 1,2,3 Category 2: Sub Categ 2,3

I am storing Selected Sub Category values in an array and I want to use it further. The array variable is set with selected values in the onChange method of dual-listbox.

Here the problem is initially if I select Category=1 and Select Sub Category = 1,2,3. But then I remember oh I wanted to select Category = 2

Here what happens is when I change the Category, Sub Category selected values automatically changed to 2,3. But I am not able to set those values to an array variable. The array will still hold previous values 1,2,3

1 Answer 1


You can either wait a tick and update the value, or you can manually filter the array when you update the dependent values.

Wait A Tick

this.availableOptions = filteredOptions;
setTimeout(() => { 
  this.availableOptions = this.template.querySelector('lightning-dual-listbox').value

After changing the options, the value attribute should update, which we can then copy.

Filter On Update

this.availableOptions = filteredOptions;
this.selectedOptions = this.selectedOptions.filter(
  selectedValue => filteredOptions.find(
    availableOption => availableOption.value === selectedValue

Basically, for each previously selected option, we see if we can find that value in the new list of options, and if not, remove it from the list.

  • Thanks.. I tried the timeout option in onChange function of Category , but it didn't work. It still returns the old selected values. And second point I didn't understand much. Can you please elaborate. Jan 25, 2022 at 10:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .