There are multiple drop-down base components available for us as part of Lightning Framework like <lightning:select> and <lightning:combobox>, but none of them support multi-option selection.
In this post, we will be creating our own aura component which will offer a nice drop down with multiple option selection. Not only this, there will plenty of other features and configuration available for this aura component, like clearing the selection, displaying label, refreshing values and more.
Usage and Configuration
This is a custom aura component to give the flexibility of multi-selection drop-down. Please take a note of a few things on how you can make the most out of this component:
General syntax to use: <c:MultiSelect msoptions="{!v.options}" />
The only required attribute is “msoptions” which accept a list or javascript array of object. Each object must have two parameters:
- Id – Id of option. Always try to keep this value unique as it helps in finding out selection uniquely.
- Name – Label of option. This value renderes in the pick list field.
Sample options list could be something like below:
[{‘Id’:1,’Name’:’Option 1′}, {‘Id’:2,’Name’:’Option 2′}, {‘Id’:3,’Name’:’Option 3′}]
Other Optional Attributes:
- mslabel – Label to be shown on top of multiselect dropdown component. If you don’t supply a value, the label will not be shown.
- maxSelectedShow – It accepts a number. Show the selected item names. If selection count increases, it displays the count of selection instead of selection names. The default value is 2.
- showFilterInput – Boolean attribute, if set to true, a text box will be displayed within multiselect component to search through values. Default is true.
- showRefreshButton – Boolean attribute, if set to true, display a refresh button to clear the picklist selection and rebuild the picklist. Default is true.
- showClearButton – Boolean attribute, if set to true, display a clear button to clear text box value.
- msname – String attribute to display default value in picklist before selection. Default is “Select a value”
Get selected options
To get all selected options, assign an aura:id to multiselect component and access the value of attribute selectedOptions:
<c:MultiSelect aura:id="jobLocationMS" mslabel="Job Location" msoptions="{!v.options}" />
In JavaScript Controller:
const selectedOptions = component.find("jobLocationMS").get("v.selectedOptions");//this will return an array of selected elements
MultiSelect Dropdown component Code
The complete code of the component is available to be downloaded on my GitHub repository here.
https://github.com/choudharymanish8585/Multi-Select-Picklist-Lightning
Usage Example
Now let’s see how you can create MultiSelect dropdown in your own aura component by using the above component.
Note: Make sure you have downloaded above component and added it in your org before you use it.
To use the above component, we will create a new component and will pass the options list to the MultiSelect component.
MultiSelectUsageDemo Component
https://gist.github.com/a5b4db94fd4e85dedf4cc2838e622666
MultiSelectUsageDemo JS Controller
https://gist.github.com/727537b624a03eda76e46c40663a24ac
Output
Below GIF shows the output of this small component. You can make it as complex as you want, you can add as many MultiSelect components as you want within your own aura component.
Shyam Nair
2 May 2019Good work!! This will really come handy!!
Pingback: Color Columns of Lightning Data Table - LWC - SFDCFacts
Brian
10 Jun 2019This is a great! Thank you for sharing. I have a question — or maybe a few … In the MultiSelect.cmp around like 68 you have the id=”listbox-option-unique-id-01″ — this is inside iteration. Should that be truly unique?
Manish Choudhari
11 Jun 2019No really!! We are not using that Id anywhere.
It’s my mistake that I haven’t removed it.
You may have the same id for all list items or you may remove it completely as it won’t affect the component.
Brian
11 Jun 2019Thank you — I’m curious, what action on the page do use you to fire the actual filtering of data? It isn’t a variable on the component, are you simply adding some code to the onInputChange event?
Brian
11 Jun 2019I guess maybe to be more specific — if the MultiSelect Component is a child, and the parent has the data to be filtered, how are you firing that event back on the parent? I hope that makes sense. Thank You!
Eric Soraya
3 Jul 2019This helped me a bunch I had to Wire it up to an existing component I had but after much debugging it seems to be implemented and working correctly. I had to tweak the Helper to grab the list and sent it to a registered event so that I could get the value in the Parent Component. And and a separate function to get the actual value that was clicked as opposed to the selectedOptions.Length + ‘Options Selected’
Thank you for the knowledge as it would have taken me a lot longer to build this from scratch.
Mukesh Saxena
20 Sep 2019It is really good. Thanks for the sharing.
J Watson
22 Oct 2019Hi Manish, the component is great and has saved so much time already. My current use case for this, however, is to allow the user to select some options in the list, they can then leave the page and return at a later date (the selected options are saved). I am having difficulty however setting the previously selected values as the component loads… Do you have any advice on how this is to be achieved? Many thanks in advance