Multi Select Picklist using Lightning Aura

A multiselect picklist is a type of picklist field that allows user to select one or more values
from predefined list of options. Such type of picklist can hold max 1000 values separated by semicolon.

In Salesforce Lightning multiselect picklist can be displayed using lightning:dualListBox component. Represent by two list boxes placed side by side. Select one or more values from left list box. Move selected options to right.

Here is a example that creates multiselect picklist on UI using lightning:dualListBox.

Source Code

Apex

public class DemoPicklistController {
    @AuraEnabled
    public static Map<String,String> getPicklistDetails(){
        try{
           return Utility.getPicklistDetails(Account.Language__c.getDescribe());
        }
        catch(Exception ex){
            System.debug('Exception: ' + ex.getMessage() + 'on Line Number: '+ex.getLineNumber()+'Stack: '+ex.getStackTraceString());
            throw new AuraHandledException('Exception: ' + ex.getMessage() + 'on Line Number: '+ex.getLineNumber());
        }
    }
}

public class Utility {
    public static Map<String,String> getPicklistDetails(Schema.DescribeFieldResult fieldDescription){
        try{
            Map<String,String> labelVsValueMapForPicklist = new Map<String,String>();
            List<Schema.PicklistEntry> picklistEntries = fieldDescription.getPicklistValues();
            for(Schema.PicklistEntry pEntry : picklistEntries){
                labelVsValueMapForPicklist.put(pEntry.getLabel(),pEntry.getValue());
            }
            return labelVsValueMapForPicklist;
        }
        catch(Exception ex){
            System.debug('Exception: ' + ex.getMessage() + 'on Line Number: '+ex.getLineNumber()+'Stack: '+ex.getStackTraceString());
            throw new AuraHandledException('Exception: ' + ex.getMessage() + 'on Line: '+ex.getLineNumber());
        }
    }
}

Lightning Component

Use size attribute to change the length of lightning:dualListbox. you can use onselect or onchange alternatively.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="DemoPicklistController">
	<aura:attribute name="language" type="List" access="public"/>
    <aura:attribute name="selectedLanguages" type="List" access="public"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:card title="Multi-Select Picklist">
        <div class="slds-p-around_medium">
            <lightning:dualListbox name="language"
                           aura:id="selectLanguage"
                           label= "Select Languages" 
                           sourceLabel="Available Languages" 
                           selectedLabel="Selected Languages" 
                           options="{!v.language}" 
                           value="{!v.selectedLanguages}" 
                           onselect="{!c.handleLanguageChange}"
                           size="8"/>
        </div>
    </lightning:card>
</aura:component>

Controller

Use event.getParam("value") when your aura:id is use in multiple components in aura component.

({
	doInit : function(component, event, helper) {
		helper.getPicklistValues(component, event, helper);
	},
    handleLanguageChange : function(component, event, helper){
        //Use event.getParam("value") when aura:id is not unique
        var selectedLanguages = component.find("v.selectLanguage").get("v.value");
        component.set("v.selectedLanguages",selectedLanguages);
        alert(selectedLanguages);
    }
})

Helper

Please note at field level multiselect picklist value store in semicolon separated values. Hence, if you want to display previously saved values. Please use .split(';') is javascript and assign it to attribute create to show selected values.

({
	getPicklistValues : function(component, event, helper) {
		var action = component.get("c.getPicklistDetails");
        action.setCallback(this, function(res){
             var state = res.getState();
            if(state === "SUCCESS"){
                var result = res.getReturnValue();
                if(!$A.util.isEmpty(result) && !$A.util.isUndefinedOrNull(result)){
                    var language = [];
                    for(var label in result){
                        language.push({label: label,value:result[label]});
                    }
                }
                component.set("v.language",language);
            }
            else if(state === "ERROR"){
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        // log the error passed in to AuraHandledException
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
	}
})