TransWikia.com

Create dynamic picklist in lwc

Salesforce Asked by Ajinkyasd on January 6, 2021

I have custom table with the multiple rows and there are two picklists in each row. Picklist options are as follows:

 @track picklist1 = [
      {value: 'w1', label: 'w1'},
      {value: 'w2', label: 'w2'}
    ];

    @track picklist2 = [
      {value: 'v1', label: 'v1'},
      {value: 'v2', label: 'v2'},
      {value: 'v3', label: 'v3'}
    ];
  1. on select of w1 from picklist1, I want to load v1 and v2 in picklist2.
  2. on select of w2 from picklist1, I want to load v2 and v3 in picklist2.

This should work for each row, i.e if 1st row picklist1 value is edited, then only 1st row picklist2 values should be updated and displayed.

html:

<td>
   <div>
      <div class="slds-select_container">
         <select class="slds-select" data-item={some id} onchange={handlePicklist1Change}>
            <option value="">Select</option>
            <template for:each ={picklist1} for:item="item">
               <option key={item.key} value={item.key}>{item.value}</option>
            </template>
         </select>
      </div>
   </div>
</td>
<td>
   <div>
      <div class="slds-select_container">
         <select class="slds-select" data-item={some id} onchange={handlePicklist2Change}>
            <option value="">Select</option>
            <template for:each ={picklist2} for:item="item">
               <option key={item.key} value={item.key}>{item.value}</option>
            </template>
         </select>
      </div>
   </div>
</td>

Js:

handlePicklist1Change(evt) {
    if (evt.target.value == "w1") {
        this.picklist2 = [{
                value: 'v1',
                label: 'v1'
            },
            {
                value: 'v2',
                label: 'v2'
            }
        ];
    }
    if (evt.target.value == "w2") {
        this.picklist2 = [{
                value: 'v2',
                label: 'v2'
            },
            {
                value: 'v3',
                label: 'v3'
            }
        ];
    }
}

I have tried above, but it updates all picklist2 in all rows.

enter image description here

One Answer

But the component is working correctly, all the comboboxes in the right column are iterating over options that come from this.picklist2, if you modify it, it will be modified in all of them, the last one you select will overwrite the rest.

you must directly overwrite it in the event, if you know the data-id for that secondary combobox, you must manipulate it with javascript and insert the new options.

Answered by Pirata21 on January 6, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP