Create dynamic picklist in lwc

Question

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.

Answer 1

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.

Answer 2

You can manipulate dependent dropdown options using the following JS code.

handlePicklist1Change(evt) {
debugger;
        //var x=document.getElementById(evt.target.attributes[0].value);
        var option;
        var option1;
        var option2;
        if(evt.target.attributes[0].value==1){
            option = document.createElement("option");
            option.text = "V1";
            option.value = "V1"; 
            option1 = document.createElement("option");
            option1.text = "V2";
            option1.value = "V2"; 
              
        }
        if(evt.target.attributes[0].value==2){
            option = document.createElement("option");
            option.text = "V2";
            option.value = "V2";  
            option2 = document.createElement("option");
            option2.text = "V3";
            option2.value = "V3";
        }
        var xx='[data-id="'+evt.target.attributes[0].value+'"]';
        var x=this.template.querySelector(xx);
        for (let i = 0; i <= x.options.length; i++) 
        x.remove(1);
        if(option!=null)
        x.appendChild(option);
        if(option1!=null)
        x.appendChild(option1);
        if(option2!=null)
        x.appendChild(option2);
    }

HTML

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