custom multi-select picklist in salesforce lightning component

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

Lightning Component

Sharing is caring!

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]
  • https://github.com/select2/select2/archive/4.0.3.zip
  • 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)
  • https://code.jquery.com/jquery-2.2.4.min.js
  • 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 (select2-4.0.3.zip + 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 

select2TestCtrl.apxc

  • See Code Comments.

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

multiSelect2.cmp

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

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

  • See Code Comments.

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

demo.app [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  🙂

Sharing is caring!

(Visited 4,314 times, 8 visits today)

22 comments

Leave a Reply