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

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 


  • See Code Comments.

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


  • See Code Comments.
multiSelect2Controller.js [js Controller]

  • See Code Comments.
multiSelect2Helper.js [js Helper]

  • See Code Comments.

From developer console >> file >> new >> Lightning Application [Lightning Application]

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  🙂

(Visited 16,570 times, 1 visits today)

40 thoughts on “Custom Multi-Select Picklist In Lightning Component With Select2 jQuery Plugin”

  1. 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

  2. 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?

  3. 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 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

  4. 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”


  5. 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.




  6. 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.


  7. 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

  8. 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.

  9. 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?

  10. has anybody tried onchange on select ?

    from onchange i have to call javascript controller method.

    It’s not working for me.

  11. Hi Leo10,

    were you able to resolve onchange action issue with select? i am also facing the same and not able to find any solution for this.

  12. Hi,
    I have used your component multiple times, but now I have requirement where I need to select multiple values from dropdown with the help of checkbox. Can this be done with your component.

  13. This is a great component!  I’m using it to display and update a selected contact records “Role” custom field.  How can I pre-populate the existing data of this contact’s role when loading the form?

    Since lightning doesn’t allow the use of dynamic arrays or objects in an expression, I can’t set the “selected” property on an option when loading in the picklist values from in the <aura:iteration>.


  14. Hi Anyone found  a  way to update this form by pre-populating the values to the Multiselect picklist.

    It would be much appreciated.



  15. Hi

    This is such a great article.However, i need a bit of help here
    When there are more than 1k values , the autocomplete works very slow and gives the performance issues.
    May i know hoe to solve it ?

  16. Onchange functionality will work ?. for example: If I change the drop down values need to call a method.will it work in that scenario???!!!


Leave a Comment