custom multi-select picklist in salesforce lightning component

Custom Multi-Select Picklist In Lightning Component With Select2 jQuery Plugin

Lightning Component

Hi Guys,

Today In this post, we are going to create a Custom Multi-Select Picklist By Using Popular jQuery  Select2 Plugin. In Salesforce Lightning Component.

Select2 is very popular jQuery PlugIn which gives you a customizable input select box with support for searching, tagging, infinite scrolling, and many other highly used options. you can learn more about select2 here

In order to use Select2 jQuery plugin, you must include the jQuery, JavaScript and CSS file on your Lightning Component via static resources.

Pre-Steps : Download and Upload Select2 Plugin & jQuery library  

Download Select2 jQuery PlugIn
  • Go to below link for download select2 Plugin. [version 4.0.3 Recommended]
  • It will be download the select2 zip file on your local computer.
  • This zip file includes CSS, JavaScript and other files for select2 plugin.
Download jQuery library [version 2.2.4 Recommended]
  • jQuery version 2.2.4 is NOT included within the Select2 plugin zip file – you must download it.
  • Go to below link for download JQuery 2.2.4 minified version. (2.2.4 Recommendation)
  • For download jQuery file right click on the page and click on save as… link OR press CTRL + S button on keyboard.

  • Save the JS file on your computer.
Step 1 : Upload Select2 zip file + jQuery file as a static resources in your Salesforce org.

Static resource is a file or collection of files that is stored on Salesforce. Once your Select2 zip file and jQuery2.2.4 JS file  is added as a static resource, it can be referenced by any of your lightning component.

  • After successfully download both files ( + jQuery js file) now we will upload it as a static resources.
  • For upload zip file, from Setup >> Develop >> Static Resources >> New.
  • In the Name field, enter the name which is use in lightning component.
  • Click Choose File or Browse, and select Select2 zip file you downloaded before.
  • In the Cache Control drop-down list, select Public.
  • Click on the Save button.

Follow same steps to upload both files.

jQuery select2 zip file upload
upload jQuery files
jQuery 2.2.4 JS file upload
Step 2 : Use Select2 on lightning component.
Component Screenshot

In this sample lightning component we are create New Account Record with multi-select picklist values.i have create a custom field Skills__c [multi-select Picklist type] with some predefined values such as [java,html,css,apex….] in Account Object.

By the ltng:require tag in lightning component we can load external CSS and JavaScript libraries after we upload them as static resources.

From developer console >> file >> new >> Apex Class 

public class select2TestCtrl {
 public static List < String > getselectOptions(sObject objObject, string fld) {
  system.debug('objObject --->' + objObject);
  system.debug('fld --->' + fld);
  List < String > allOpts = new list < String > ();
  // Get the object type of the SObject.
  Schema.sObjectType objType = objObject.getSObjectType();
  // Describe the SObject using its object type.
  Schema.DescribeSObjectResult objDescribe = objType.getDescribe();
  // Get a map of fields for the SObject
  map < String, Schema.SObjectField > fieldMap = objDescribe.fields.getMap();
  // Get the list of picklist values for this field.
  list < Schema.PicklistEntry > values =
  // Add these values to the selectoption list.
  for (Schema.PicklistEntry a: values) {
  system.debug('allOpts ---->' + allOpts);
  return allOpts;
    public static account saveAccount(Account acc){
        system.debug('acc-->' + acc);
        insert acc;
        return acc;
  • See Code Comments.

From developer console >> file >> new >> Lightning Component 

<aura:component controller="select2TestCtrl">	
  <!--First Add jQuery and Select2 plugin library from static resource Using ltng:require tag-->  
    <ltng:require styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}" 
        $Resource.jquery224 ,  
        $Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
      }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
  <!--init handler event call "doInit" function on component load and fetch picklist values-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  <!--Declare Attributes--> 
    <aura:attribute name="picklistOptsList" type="String[]"/>
    <aura:attribute name="objAcc" type="Account" default="{sobjectType : 'Account'}" />
  <!--create form-->
 <div class="slds-m-around--medium slds-form--stacked">  
     <div class="slds-text-heading--large">Create Record With Multi-Picklist Sample</div>

   <div class="slds-form-element">
         <ui:inputText value="{!v.objAcc.Name}" label="Account Name" class="slds-input slds-form-element__label"/>
 <!--for multi-select picklist [select2] -->    
   <div class="slds-form-element">  
     <label for="picklist">Skills</label> <br/>
     <select style="width:100%" id="picklist" class="select2Class" multiple="multiple">
       <aura:iteration items="{!v.picklistOptsList}" var="opts">
           <option value="{!opts}"> {!opts} </option>
 <!--Account Save Button-->    
  <div class="slds-form-element">    
    <button class="slds-button slds-button--brand" onclick="{!c.createAccount}">Create Account</button>
  • See Code Comments.
multiSelect2Controller.js [js Controller]
   scriptsLoaded : function(component, event, helper) {
		console.log('load successfully');
       // active/call select2 plugin function after load jQuery and select2 plugin successfully    
           placeholder: "Select Multiple values"
    doInit: function(component, event, helper) {
       /*On the component load call the fetchPickListVal helper method
         pass the Picklist[multi-select] API name in parameter  
        helper.fetchPickListVal(component, 'skills__c');
    createAccount : function(component,event,helper){
        when User will click on the "Create Account" button on UI ,
        first we get the selected picklist values by :
        and set it to the objAcc attribute[account type] Skills__c field.
        var selectedSkills = $('[id$=picklist]').select2("val");
      // after set the Picklist value get the Current Account Record 
      // and call the "saveAccount" apex method which is save our record  
        var getCurrentAccount = component.get("v.objAcc");       
        var action = component.get("c.saveAccount");
             "acc": getCurrentAccount
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
             alert('account Save Successfully-->' + JSON.stringify(response.getReturnValue()));   
  • See Code Comments.
multiSelect2Helper.js [js Helper]
    fetchPickListVal: function(component, fieldName) {
      /* call the apex getselectOptions method which is returns picklist values
         set the picklist values on "picklistOptsList" attribute [String list].
         which attribute used for iterate the select options in component.
        var action = component.get("c.getselectOptions");
             "objObject": {sobjectType : 'Account'},
             "fld": fieldName
        var opts = [];
        action.setCallback(this, function(response) {
            if (response.getState() == "SUCCESS") {
                var allValues = response.getReturnValue();
                for (var i = 0; i < allValues.length; i++) {
                component.set("v.picklistOptsList", opts);
  • See Code Comments.

From developer console >> file >> new >> Lightning Application [Lightning Application]
<aura:application extends="force:slds">
<!-- here c: is org. default namespace prefix-->
Output -:

You can use more option with select2 jQuery plugin, check Examples here..

Some Useful Resources : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  🙂


  • Hello, excellent material, you know that the select2 does not load the options, however in the controller I print the values ??with console.log and I see that if they are, but in the component specifically in the select2 it does not iterate and they do not appear in the inspector of Elements, you know that can happen? If I place this array in a lightning: select if the values ??appear but in the select2 no

  • I just see the problem, I have the select2 in a modal and the list of options is shown behind the modal, any suggestions how to repair it?

    • I also encountered z-index issue while using this multiselect on modal. Can you please tell what you did with the z-index.

      Thanks in advance

  • Is jquery working now for lightening. From what I remember none of jquery datatable was working in UAT due to locker services. Can you please confirm? Although in sanboxes jqery datatable were working.

  • Hi  there, I am trying to use this multiselect  field on Modal Box as explained in

    But things not happening.

    • Hi shassan,
      for solve this issue, create a external CSS file with below code


      Upload this CSS file as static and use it in your Lightning Component using below line

      Thanks Hops It helps

  • Thanks for your  kind attention Admin.

    But It seems you missed  something below

    “Upload this CSS file as static and use it in your Lightning Component using below line

    Thanks Hops It helps”


  • I am getting


    $scriptsLoaded [$(…).select2 is not a function

    error while the lightning component loads.

    This error is not happening consistently but happens when we switch the tabs from one to another in lightning apps.




  • Hi,

    Im using this custom multi-select picklist and its working just fine.

    My concern is how to send the values selected to my controller, using

    <c:MultiSelect value=”{!v.sObject.customMultipickListField__c}” />

    doesnt work and its how im i doing it on a custom LookupField.


  • Hi.. this is a really good tutorial.

    One thing that I am unable to figure out is, the best way to prepopulate the selections?

    For example when you are trying to update an Account, and you need to know what options are already selected.

    Regards, Kash

      • Hi Piyush,

        This does not work for the edit mode. For example, I want to use the same component on create as well as on edit of a record. In edit, I want to display the existing value on the field as selected in the component.Any idea how to achieve that?

  • Thanks for sharing this blog. This was awesome.

    I have the same requirement with additionally, i wanted to search dynamically. Like by default i can show 20 records in the dropdown. Then there is a ability to search record dynamically on the basis of user search string.

    How we can accomplished this with this lightning component.

  • Nice Explained and worked pretty well as per my requirement.

    But I also to have button on component, which i needs to disable once all values are selected. Any idea, how can i achieve it using this code?

  • has anybody tried onchange on select ?

    from onchange i have to call javascript controller method.

    It’s not working for me.

Leave a Reply