Dear gurus,

This issue is with lightning:select saving previous values and not the existing ones..In the video (https://www.youtube.com/watch?v=dVxASPnXfGI&feature=youtu.be)   I will show problem...

• First saved Level1 , Level2 and Level3 successfully then
• Now,I reset Level1 and you can see Level2 and Level3 in the Aura component,as you see Aura component got successfully changed to "---None---" but when I saved the record, instead of saving "---None---" in Level2 and Level3 it saved the old values of Level2 and Level3 which is not expected, so it seems a rendering issue can someone help me in fixing this issue

Here is .cmp code
 

<aura:component controller="PickListHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <!-- Actions-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  
    <!-- variable-->
    <aura:attribute name="lstLevel1" type="String[]" />
     <aura:attribute name="lstLevel2" type="String[]"  />
      <aura:attribute name="lstL3"  type="String[]"  />
        <aura:attribute name="firstlevel1selected" type="String" default="" />
     <aura:attribute name="secondlevelselected" type="String" default="" />
      <aura:attribute name="thirdlevelselected"  type="String" default="" />
    
	   <div class="slds-container--center slds-container--small slds-m-top--small">
        <div class="slds-form--stacked">
             
            <lightning:select name="parentPicklist" label="Level 1"  aura:id="ddLevel1"  onchange="{!c.getLvl1}">
                <option value="">--- None ---</option>
                <aura:iteration items="{!v.lstLevel1}" var="item1">
                    <option  value="{!item1.value}" selected="{!item1.selected}" >{!item1}</option>
                </aura:iteration>
            </lightning:select>
             
            <lightning:select name="Level2Picklist" label="Level 2"  aura:id="ddLevel2"   onchange="{!c.getSelectedValue}" >
                <option value="">--- None ---</option>
                <aura:iteration items="{!v.lstLevel2}" var="item2">
                    <option  value="{!item2.value}" selected="{!item2.selected}" >{!item2}</option>
                </aura:iteration>
            </lightning:select>
			
			 <lightning:select name="Level3Picklist" label="Level 3"  aura:id="ddLevel3" onchange="{!c.getlevel3}"  >
                <option value="">--- None ---</option>
                <aura:iteration items="{!v.lstL3}" var="item3">
                    <option  value="{!item3.value}" selected="{!item3.selected}" >{!item3}</option>
                </aura:iteration>
            </lightning:select>
             
        </div>        
    </div>
   <lightning:button variant="brand" label="Save" onclick="{!c.onConfirm}" />
</aura:component>

Here is controller JS code
 

({
  
    doInit : function(component, event, helper) {
        var action = component.get("c.getLevel1");
        action.setCallback(this, function(e) {
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                component.set("v.lstLevel1",result);
            }
        });
        $A.enqueueAction(action);
    },    
    getLvl1:function(component, event, helper){
       
        var picklist=component.find('ddLevel1');
        var picklistvalue=picklist.get('v.value');
        component.set("v.firstlevel1selected",picklistvalue);
        var action = component.get("c.getLevel2");
        action.setParams({  'strName' : picklistvalue  });
        action.setCallback(this, function(e) {
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                component.set("v.lstLevel2",result);
                helper.getSelectedValue(component,event,helper);
            }
        });
        $A.enqueueAction(action);
            },
    getSelectedValue:function(component, event, helper){
        var picklist=component.find('ddLevel1');
       
        var picklistvalue=picklist.get('v.value');
         
        var picklistdep=component.find('ddLevel2');
        
        var picklistvaluedep2=picklistdep.get('v.value');
        component.set("v.secondlevelselected",picklistvaluedep2);
        var action = component.get("c.getLevel3");
        
        action.setParams({  'strName1' : picklistvalue,
                         'strName2' : picklistvaluedep2});//
        action.setCallback(this, function(e) {
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                component.set("v.lstL3",result);
            }
        });
        $A.enqueueAction(action);
    },
    getlevel3:function(component, event, helper){
        var picklist=component.find('ddLevel3');
       
        var picklistvalue=picklist.get('v.value');
         component.set("v.thirdlevelselected",picklistvalue);
        
    },
    onConfirm:function(component, event, helper){
        var picklist=component.find('ddLevel1');
        var picklistvalue=picklist.get('v.value');
        var picklistdep=component.find('ddLevel2');
        var picklistvaluedep2=picklistdep.get('v.value');
       
        var picklistdep3=component.find('ddLevel3');
        var picklistvaluedep3=picklistdep3.get('v.value');
        console.log(component.get('v.firstlevel1selected'));
         console.log(component.get('v.secondlevelselected'));
         console.log(component.get('v.thirdlevelselected'));
        
        var action = component.get("c.savecasetype");
        
        action.setParams({  'level1' : picklistvalue,
                          'level2' : picklistvaluedep2,
                          'level3' : picklistvaluedep3,
                          'id' : component.get("v.recordId")});
                          
        
        var toastEvent = $A.get("e.force:showToast");
        action.setCallback(this, function(e) {
            if(e.getState()=='SUCCESS'){
                var result=e.getReturnValue();
                if(result==='successfull'){
                    toastEvent.setParams({
                        "title": "Success!",
                        "message": "The record has been inserted  successfully."
                    });
                    toastEvent.fire();
                }else{
                    toastEvent.setParams({
                        "title": "Error",
                        "message": "The record has not been inserted  successfully."
                    });
                    toastEvent.fire();
                }
            }
        });
        $A.enqueueAction(action);
       
    },
       
       
})

Here is Helper JS code
 

({
    getSelectedValue:function(component, event, helper){
       var picklist=component.find('ddLevel1');
      
       var picklistvalue=picklist.get('v.value');
        
       var picklistdep=component.find('ddLevel2');
       
       var picklistvaluedep2=picklistdep.get('v.value');
       component.set("v.secondlevelselected",picklistvaluedep2);
       var action = component.get("c.getLevel3");
       
       action.setParams({  'strName1' : picklistvalue,
                        'strName2' : picklistvaluedep2});//
       action.setCallback(this, function(e) {
           if(e.getState()=='SUCCESS'){
               var result=e.getReturnValue();
               component.set("v.lstL3",result);
           }
       });
       $A.enqueueAction(action);
   },
   getlevel3:function(component, event, helper){
       var picklist=component.find('ddLevel3');
      
       var picklistvalue=picklist.get('v.value');
        component.set("v.thirdlevelselected",picklistvalue);
       
   }
   ,
   resetlevel2:function(component, event, helper){
    component.set("v.lstLevel2", "--- None ---");
     
    
},
resetlevel3:function(component, event, helper){

    component.set("v.lstL3", "--- None ---");
   
}
})

Your help in fixing this is very much appreciated

Thanks,
Fiona