Hi Risabh,

Try the below changed Code: 

Apex Class:

public class DropdownContrl {
    
    @Auraenabled
    public static List<Account> getAccounts()
    {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name FROM Account];
        system.debug('Accounts '+accList);
        return accList;
    }
    @Auraenabled
    public static List<Contact> getContact(Id accountIds)
    {
        System.debug('Acclount Id '+accountIds);
        List<Contact> conlst = new List<Contact>();
        conlst = [SELECT  FirstName, LastName,Email,Phone from Contact WHERE 
                  accountId  =: accountIds];
        system.debug('contacts '+conlst);
        return conlst;
    }
}


=================


Component:

<aura:component controller="DropdownContrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="Accounts" type="List" />
    <aura:attribute name="Contacts" type="List" />
    <aura:attribute name="showContacts" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />

    <lightning:card title="Display Account">
    <lightning:layout>
        <article class="slds-card slds-m-bottom_medium">
            <div class="slds-media__body">
                <div>
                    <lightning:layoutitem>
                        <lightning:select aura:id="act" name="selectAccount" label="Select a Account">
                            <option value="" label="--None--">
                            </option>
                            <aura:iteration items="{!v.Accounts}" var="item" >
                                <option value="{!item.Id}" label="{!item.Name}" >
                                    {!item.Name}
                                </option>
                            </aura:iteration>
                        </lightning:select>
                    </lightning:layoutitem>
                </div>
            </div>
        </article>
    </lightning:layout>
    <div>
            <lightning:button label="Get Contacts" title="Neutral action" onclick="{! c.getcontacts }"/>

                <!--     <button  class="slds-button slds-button_brand" style="height:30px;width: 50px;" label ="Get Contacts" onclick="{!c.getcontacts}" ></button>-->

    </div>
     <aura:if isTrue="{!v.showContacts}">
     <h2 class="slds-page-header__title">Related Contacts</h2>
     <div  aura:id="ContactRecordViewController" class="slds"> 
        <table class="slds-table slds-table--bordered slds-table--striped">
            <thead>
                <tr>
                    <th scope="col"><span class="slds-truncate">First Name</span></th>
                    <th scope="col"><span class="slds-truncate">Last Name</span></th>
                    <th scope="col"><span class="slds-truncate">Email</span></th>
                    <th scope="col"><span class="slds-truncate">Phone</span></th>
                 
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Contacts}" var="con" indexVar="index">
                    <tr>
                        <td data-index="{!index}">{!con.FirstName}</td>
                        <td data-index="{!index}">{!con.LastName}</td>
                        <td data-index="{!index}">{!con.Email}</td>
                        <td data-index="{!index}">{!con.Phone}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
   </aura:if>
    </lightning:card>
</aura:component>



====================

JS Controller:

({
doinit : function(component, event, helper) {
    console.log('load');
    var action = component.get('c.getAccounts');
    action.setCallback(this, function(response){
            var result =response.getReturnValue();
            console.log(result);
            component.set("v.Accounts",result);
            console.log(result);
    });
    $A.enqueueAction(action);
},
     getcontacts : function(component, event, helper) 
    {
        
        helper.fetchContacts(component, event, helper);
    } ,
})


=================


JS Helper:

({
    fetchContacts : function(component, event, helper) {
        //alert('act ==> ' + component.find('act').get('v.value') );
        var action = component.get("c.getContact");
        console.log(action);
        var accountId = component.find('act').get('v.value');
        console.log(accountId);   
        action.setParams({
            accountIds: accountId
        });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === 'SUCCESS') {
                var contactList = response.getReturnValue();
                if(contactList.length > 0)
                {
                    component.set("v.showContacts",true);
                }
                else{
                    component.set("v.showContacts",false);
                }
                component.set("v.Contacts",contactList);
                console.log(contactList);
            }
            else {
                component.set("v.showContacts",false);
                alert('Error in getting data');
            }
        });
        $A.enqueueAction(action);
    },

})

Thanks,
Maharajan.C