//Component - 

<aura:component controller="AccountOppController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="accList" type="Account[]" />
    <aura:attribute name="oppList" type="Opportunity[]" />       
    <aura:attribute name="closeDate" type="string" />    
    <aura:attribute name="stageName" type="string" />  
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:select name="list1" label="Accounts" onchange="{! c.getOpps }" >
        <option value="- Select An Account -" text="- Select An Account -" />
        <aura:iteration items="{!v.accList}" var="acc">
            <option text="{!acc.Name}" value="{!acc.Id}"/>
        </aura:iteration>
    </lightning:select>
    
    <lightning:select name="list2" label="Opportunities" onchange="{! c.getInfo }">    
        <option value="- Select An Opportunity -" text="- Select An Opportunity -" />
        <aura:iteration items="{!v.oppList}" var="opp">
            <option text="{!opp.Name}" value="{!opp.Id}"/>
        </aura:iteration>
    </lightning:select>
    <aura:if isTrue="{!v.isOpen}">                        
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">                   
                <header class="slds-modal__header">
                    <lightning:buttonIcon iconName="utility:close"
                                          onclick="{! c.closeModel }"
                                          alternativeText="close"
                                          variant="bare-inverse"
                                          class="slds-modal__close"/>
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Opportunity Info</h2>
                </header>                    
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    {!v.stageName}<br/>
                    {!v.closeDate}  
                </div>                
                <footer class="slds-modal__footer">
                    <lightning:button variant="neutral" 
                                      label="Cancel"
                                      title="Cancel"
                                      onclick="{! c.closeModel }"/>                    
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>                      
    </aura:if>      
</aura:component>


//Controller - 

({
    doInit : function(component, event, helper) {        
        helper.doInitHelper(component, event, helper);
    },
    getOpps : function(component, event, helper) {       
        helper.getOppsHelper(component, event, helper);
    },
    getInfo : function(component, event, helper) {         
        helper.getInfoHelper(component, event, helper);
    },
    closeModel: function(component, event, helper) {     
      component.set("v.isOpen", false);
   },
})


//Helper - 

({
    doInitHelper : function(component, event, helper) {                 
        var action =component.get("c.getAccounts");
        console.log('The action value is: '+action);
        action.setCallback(this, function(a){              
            component.set("v.accList", a.getReturnValue());            
            console.log('The account list is :'+JSON.stringify(a.getReturnValue()));          
        });
        $A.enqueueAction(action);      
    },
    getOppsHelper : function(component, event, helper) {                 
        var accId = event.getSource().get("v.value");        
        var action2 = component.get("c.getOppList");
        console.log('The action value is: '+action2);        
        action2.setParams({
            accId : accId
        });
        action2.setCallback(this, function(a){              
            component.set("v.oppList", a.getReturnValue());            
            console.log('The opportunity list is :'+JSON.stringify(a.getReturnValue()));          
        });
        $A.enqueueAction(action2);      
    },
    getInfoHelper : function(component, event, helper) {                  
        var oppId = event.getSource().get("v.value");
        if(oppId != '- Select An Opportunity -') {
            var action3 = component.get("c.getDetails");
            console.log('The action value is: '+action3);        
            action3.setParams({                
                oppId : oppId
            });
            action3.setCallback(this, function(a){                         
                component.set("v.stageName", 'Stage Name - '+a.getReturnValue()[0]);  
                component.set("v.closeDate", 'Close Date - '+a.getReturnValue()[1]);                               
                console.log('The field list is :'+JSON.stringify(a.getReturnValue()));          
            });
            $A.enqueueAction(action3);  
            component.set("v.isOpen","true");
        }            
    }
})


//Server Side Controller(Apex Class) - 

public class AccountOppController {
    @auraEnabled
    public static List<Account> getAccounts() {
        return [Select Id, Name From Account];
    }
    @AuraEnabled
    public static List<Opportunity> getOppList(String accId) {
        return [Select Id, Name From Opportunity Where AccountId = :accId];
    }   
    @auraEnabled
    public static List<String> getDetails(String oppId) {        
        Opportunity opp = [Select Id, Name, StageName, CloseDate From Opportunity Where Id = :oppId Limit 1];
        List<String> fldInfo = new List<String>();                                  
        fldInfo.add(opp.StageName);
        fldInfo.add(''+opp.CloseDate);       
        return fldInfo;
    }    
}


//Lightning App - 

<aura:application extends="force:slds">   
    <c:AccountOppComponent/>
</aura:application>