<aura:component controller="valuesget">
    <ltng:require styles="{!$Resource.slds + '/assets/styles/salesforce-lightning-design-system.css'}" />
    <aura:handler name="init" value="{!this}" action="{!c.initmethod}" />
    <aura:attribute name="AccountList" Type="List" />
    <aura:attribute name="selectedvalues" Type="List" />
    <ui:inputSelect class="slds-input" aura:id="pick"  change="{!c.selectoptionvalue}" >
        <aura:iteration var="a" items="{!v.AccountList}">
            <ui:inputSelectOption label="{!a.BillingCity}" text="{!a.BillingCity}" />
        </aura:iteration>
    </ui:inputSelect>
    <aura:iteration items="{!v.selectedvalues}" var="account">
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media--center slds-has-flexi-truncate">
                    <div class="slds-media__body slds-truncate">
                        <h2>
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-text-heading--small">{!account.Name}</span>
                            </a>
                        </h2>
                    </div>
                </header>
            </div>
            <div class="slds-card__body">{!account.BillingCity}</div>
            
        </article>
    </aura:iteration> </aura:component>

Controller:

({
    
    initmethod : function(component,event,helper){
        var action = component.get("c.getAccountList");
        action.setCallback(this,function(a){
            var state=a.getState();
            if(state == "SUCCESS"){
                component.set("v.AccountList",a.getReturnValue());
            }
            
        });
        $A.enqueueAction(action);
    },
    
    selectoptionvalue :function(component,event,helper){
        var temp=component.get("v.selectedvalues");
        temp = [];//empty when while changing Picklist value
        var billingcity = component.find("pick").get("v.value");
         var accountdetails = component.get("v.AccountList");
         for(var i=0;i<accountdetails.length;i++){
            if(accountdetails[i].BillingCity == billingcity){
                temp.push(accountdetails[i]);
            }
        }
        component.set("v.selectedvalues",temp);
    }
    
})

<aura:component controller="valuesget"> <ltng:require styles="{!$Resource.slds + '/assets/styles/salesforce-lightning-design-system.css'}" /> <aura:handler name="init" value="{!this}" action="{!c.initmethod}" /> <aura:attribute name="AccountList" Type="List" /> <aura:attribute name="SelectedCity" Type="List" /> <aura:attribute name="selectedvalues" Type="List" />

    <aura:iteration var="a" items="{!v.AccountList}" indexVar="indx">
        <ui:inputCheckbox aura:id="pick" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
    </aura:iteration>

<aura:iteration items="{!v.selectedvalues}" var="account">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media--center slds-has-flexi-truncate">
                <div class="slds-media__body slds-truncate">
                    <h2>
                        <a href="javascript:void(0);" class="slds-text-link--reset">
                            <span class="slds-text-heading--small">{!account.Name}</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body">{!account.BillingCity}</div>
        
    </article>
</aura:iteration>

</aura:component>

Controller:

({

initmethod : function(component,event,helper){
    var action = component.get("c.getAccountList");
    action.setCallback(this,function(a){
        var state=a.getState();
        if(state == "SUCCESS"){
            component.set("v.AccountList",a.getReturnValue());
        }
         
    });
    $A.enqueueAction(action);
},

selectoptionvalue :function(component,event,helper){
    var temp=component.get("v.selectedvalues");
    var selectedcity=component.get("v.SelectedCity");
    var accountdetails = component.get("v.AccountList");
     temp = [];//empty when while changing Picklist value
    if(event.getSource().get("v.value")){
        selectedcity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'value':event.getSource().get("v.value")});
    }
    if(event.getSource().get("v.value") == false){
        for(var j=0;j<selectedcity.length;j++){
            if(selectedcity[j].ids == event.getSource().get("v.name")){
                var index = j;
            }
        }
         selectedcity.splice(index,1);
     }
      component.set("v.SelectedCity",selectedcity);      
    var accountdetails = component.get("v.AccountList");        
    for(var i=0;i<accountdetails.length;i++){
        for(var k=0;k<selectedcity.length;k++){
            if(accountdetails[i].BillingCity == selectedcity[k].name){
                temp.push(accountdetails[i]);
            }
        }
    }
     
    component.set("v.selectedvalues",temp);
}

})