+ Start a Discussion
ram dram d 

How to add picklist values to html table Header

Hi ,
I want to Add a picklist value to a table header by using Add Prod custom button once i selected that value from the picklist then that value needs to  remove from the picklist values , Can some one please help me how to achieve this in Lightning 

Thanks in Advance !!
ram dram d
Hi Mathew,

Thanks for your response, Actually i need help in Lightning Component as I am new to Lightning 

Thanks
Ramesh
Ajay K DubediAjay K Dubedi
Hi Ram,

Try the following sample code:

--------------Component-------------------

<aura:component >
    <aura:attribute name="AddedValue" type="List" default="[]"/>
    <aura:attribute name="PickListValues" type="String"/>
    <aura:attribute name="SelectedValue" type="String"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   
    <aura:iteration items="{!v.AddedValue}" var="av">
        {!av}
    </aura:iteration>
    <lightning:select name = "PickList" label = "PickList" onchange="{!c.changePicklist}" >
        <aura:iteration items="{!v.PickListValues}" var="var">
            <option value="{!var}" label="{!var}"/>
        </aura:iteration>
    </lightning:select>
    <lightning:button label="Click To Add PickList Values" name="Click To Add PickList Values" onclick="{!c.RemoveAdd}"/>
    
</aura:component>
    
----------------Controlller----------------------

({    
      init :function(c, e, h){
       c.set('v.PickListValues',['Value1', 'Value2', 'Value3', 'Value4']);   
    },
    
    changePicklist: function(c, e, h) {
      console.log(e.getSource().get('v.value'));
      c.set('v.SelectedValue',e.getSource().get('v.value')); 
   },
    
    RemoveAdd : function(c, e ,h){
        h.RemoveAddHelper(c, e, h);
    } 
})

-----------------Helper--------------------------------------

({    
    RemoveAddHelper : function(c, e, h) {
        let selectedValue = c.get('v.SelectedValue');
        let newSelectedValue = c.get('v.newSelectedValue');
        let PicklistValues = c.get('v.PickListValues');
        let AddedValue = c.get('v.AddedValue');
        
        let arr = AddedValue;
        console.log('Before for'+arr);
        for(let i=0; i<PicklistValues.length; i++){
            if(PicklistValues[i] == selectedValue){
                 arr.push(selectedValue);
                PicklistValues.splice(i, 1);   
            }
                    
        }
        console.log('After for'+arr);
        c.set('v.AddedValue',arr);
        console.log('Spliced PicklistValues'+PicklistValues);
        c.set('v.PickListValues',PicklistValues);
    }
})    


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi