Hello Everyone, In this tutorial, I am going provide an example of multi-select picklist in Lightning Component. That helps you to select multiple values from the picklist. 

After completing this tutorial you'll able to:
  • Create Multiselect Picklist in Lightning Component
So let's begin,

Multiselect Picklist

Login to your Salesforce Org. and open developer console.


Step1: Go to File>New>Lightning Component and create a Lightning Component called MultiSelectPicklist. Replace the following markup in the Lightning Component.

 MultiSelectPicklist.cmp
 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="SelectedAllColor" type="boolean" default="false" />     
    <aura:attribute name="SelectedColor" type="String"/>
    <aura:attribute name="ColorList" type="Object[]" />    
    <aura:attribute name="Selected" type="string"/>  
    <center style="margin-top:20px;">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem padding="around-small" size="6">
                <div aura:id="ddlPart" class="slds-picklist" onclick="{!c.OpenColorToggle}" onmouseleave="{!c.HideColorToggle}" style="width:20%">
                    <button class="slds-button slds-button--neutral slds-picklist__label" aria-haspopup="false">            
                        <aura:if isTrue="{!v.SelectedAllColor == true}">
                            <label id="lblselectvalue">  All Color </label>
                            <aura:set attribute="else">
                                <label id="lblselectvalue">
                                    <aura:if isTrue="{!v.SelectedColor == null}">
                                        Select Color
                                        <aura:set attribute="else">
                                            Selected Color {!v.SelectedColor}
                                        </aura:set>
                                    </aura:if>                            
                                </label>  
                            </aura:set>
                        </aura:if>
                        <lightning:icon iconName="utility:down" alternativeText="down" />
                    </button>
                    <div class="slds-dropdown slds-dropdown--left slds-hide" aura:id="droplist_color"  onmouseleave="{!c.HideColorToggle}" style="max-height:auto; overflow:auto;margin-top:auto;">
                        <ul class="slds-dropdown__list" role="menu" >                
                            <aura:if isTrue="{!v.SelectedAllColor == true}">
                                <li class="slds-dropdown__item slds-is-selected" role="presentation" id="AllColor">
                                    <a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="true"  id="AllColor" onclick="{!c.AllColorUnCheck}">
                                        <span class="slds-truncate" id="AllColor">
                                            <lightning:icon class="selected" iconName="utility:check" alternativeText="check" size="small"/>
                                            <label>All Color</label>
                                        </span>
                                    </a>
                                </li>
                                <aura:set attribute="else">
                                    <li class="slds-dropdown__item slds-is-selected" role="presentation" id="AllColor">
                                        <a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="false"   id="AllColor" onclick="{!c.AllColorCheck}">
                                            <span class="slds-truncate" id="AllColor">
                                                <lightning:icon iconName="utility:check" alternativeText="check" size="small"/>
                                                <label>All Color</label>
                                            </span>
                                        </a>
                                    </li>
                                </aura:set>
                            </aura:if>
                            <aura:iteration items="{!v.ColorList}" var="color">                    
                                <aura:if isTrue="{!color.flag == true}">                        
                                    <li class="slds-dropdown__item slds-is-selected" role="presentation" id="{!color.Id}">
                                        <a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="true"  id="{!color.Id}" onclick="{!c.ColorUnCheck}">
                                            <span class="slds-truncate" id="{!color.Id}">
                                                <lightning:icon class="selected" iconName="utility:check" alternativeText="check" size="small"/>
                                                <label id="{!color.Id}">{!color.Name}</label>
                                            </span>
                                        </a>
                                    </li>
                                    
                                    <aura:set attribute="else">
                                        <li class="slds-dropdown__item slds-is-selected" role="presentation" id="{!color.Id}">
                                            <a href="javascript:void(0);" role="menuitemcheckbox" aria-checked="false"   id="{!color.Id}" onclick="{!c.ColorCheck}">
                                                <span class="slds-truncate" id="{!color.Id}">
                                                    <lightning:icon iconName="utility:check" alternativeText="check" size="small"/>
                                                    <label id="{!color.Id}">{!color.Name}</label>
                                                </span>
                                            </a>
                                        </li>
                                    </aura:set>                        
                                </aura:if>   
                            </aura:iteration>
                        </ul>
                    </div>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small" size="3">
                <lightning:button variant="brand" label="Get Value" title="Get Value" onclick="{!c.showSelectedColor}"/>                
            </lightning:layoutItem>
        </lightning:layout>
    </center>
 </aura:component> 
MultiSelectPicklistController.js 
 ({
    doInit: function(component,event,helper) {
        var Colorobj=[{"Id":"Red","Name":"Red","flag":false},
                      {"Id":"Green","Name":"Green","flag":false},
                      {"Id":"Yellow","Name":"Yellow","flag":false}
                     ];
        component.set("v.ColorList",Colorobj);
    },
    
    OpenColorToggle:function(component,event,helper){
        var action=component.find("droplist_color");
        $A.util.removeClass(action,"slds-dropdown slds-dropdown--left slds-hide");
        $A.util.addClass(action,"slds-dropdown slds-dropdown--left slds-show");
    },
    
    HideColorToggle:function(component,event,helper){        
        var action=component.find("droplist_color");
        $A.util.removeClass(action,"slds-dropdown slds-dropdown--left slds-show");
        $A.util.addClass(action,"slds-dropdown slds-dropdown--left slds-hide");
        var ySelected=component.get("v.Selected");  
        if(ySelected=="1"){
            var arrColorID=new Array();           
            var isColorSelect=false;                   
            var ColorResult=JSON.parse(JSON.stringify(component.get("v.ColorList")));
            if(ColorResult !=null){
                for(var res in ColorResult){
                    if(ColorResult[res].flag==true){
                        arrColorID.push(ColorResult[res].Name);                       
                    }
                }                
            }            
        }
    },
    
    AllColorUnCheck:function(component,event,helper){
        component.set("v.SelectedAllColor",false);
        component.set("v.SelectedColor",null);
        var Colors=[];
        var ColorList=component.get("v.ColorList");
        for(var i in ColorList){
            var obj={
                Id:ColorList[i].Id,
                Name:ColorList[i].Name,
                flag:false
            }  
            Colors.push(obj);
        }
        component.set("v.Selected","1");        
        component.set("v.ColorList",Colors);
    },
    
    AllColorCheck:function(component,event,helper){
        component.set("v.SelectedAllColor",true);
        component.set("v.SelectedColor",null);
        var Colors=[];
        var ColorList=component.get("v.ColorList");
        for(var i in ColorList){
            var obj={
                Id:ColorList[i].Id,
                Name:ColorList[i].Name,
                flag:true
            }  
            Colors.push(obj);
        }
        component.set("v.Selected","1");
        component.set("v.SelectedColor",Colors.length);
        component.set("v.ColorList",Colors);  
    },
    
    ColorCheck:function(component, event, helper){
        var ColorId=event.target.getAttribute('id'); 
        var ColorList=component.get("v.ColorList");
        component.set("v.SelectedAllColor",false);
        var count=1;
        var Colors=[];
        for(var i in ColorList){
            if(ColorList[i].Id==ColorId){
                var obj={
                    Id:ColorList[i].Id,
                    Name:ColorList[i].Name,
                    flag:true
                }  
                Colors.push(obj);                
            }
            else{
                var obj={
                    Id:ColorList[i].Id,
                    Name:ColorList[i].Name,
                    flag:ColorList[i].flag
                }  
                Colors.push(obj);
            }
        }
        for(var a in Colors){
            if(ColorList[a].flag==true){
                count +=1;
            }
        }
        component.set("v.Selected","1");
        component.set("v.SelectedColor",count);
        component.set("v.ColorList",Colors);        
    },
    
    ColorUnCheck:function(component, event, helper){
        var ColorId=event.target.getAttribute('id'); 
        var ColorList=component.get("v.ColorList");
        component.set("v.SelectedAllColor",false);
        var count=component.get("v.SelectedColor");        
        var Colors=[];
        for(var i in ColorList){
            if(ColorList[i].Id==ColorId){
                var obj={
                    Id:ColorList[i].Id,
                    Name:ColorList[i].Name,
                    flag:false
                }  
                Colors.push(obj);
                count -=1;  
            }
            else{
                var obj={
                    Id:ColorList[i].Id,
                    Name:ColorList[i].Name,
                    flag:ColorList[i].flag
                }  
                Colors.push(obj);                
            }
        }        
        if(count==0){
            component.set("v.SelectedColor",null);
        }
        else{
            component.set("v.SelectedColor",count);
        }
        component.set("v.Selected","1");
        component.set("v.ColorList",Colors);
    },  
    
    showSelectedColor: function(component) {
        var selectedColor=[];
        var ColorList=component.get("v.ColorList");
        for(var i in ColorList){           
            if(ColorList[i].flag){
                selectedColor.push(ColorList[i].Name);
            }
        }
        if(selectedColor.length>0)
        alert(JSON.stringify(selectedColor));  
        else
            alert('Please select color');
    }, 
 }) 
MultiSelectPicklist.css 
 .THIS .selected svg{
   fill : #2196f3 !important;
 }
Step2: Go to File>New>Lightning Application and create a Lightning Application called Preview. Replace the following markup in the Lightning Application.

 Preview.app 
 <aura:application extends="force:slds"> 
    <c:MultiSelectPicklist/>
 </aura:application>
After that click on Preview button from Right Side Pallete.


Output:

See also:
Conclusion:
Hope you like this tutorial, for any query or suggestions please feel free to comment.
Thank you.