Using optgroup in lightning:select


Grouped Options in Salesforce Mobile

Every coding framework/toolset has strengths and weaknesses. There are some incredibly powerful things that you can do very simply, but often times there are incredibly simple things that require more brainpower (and a lot more coding) than should really be necessary.

Unfortunately, grouping options read from in a Salesforce lightning:select control falls into the latter category.

In order to achieve the grouping effect, as seen in the screenshot at right, I needed to pull data using Apex, group it client-side into an array of objects, and then loop through that array of objects in the lightning component.

In this use-case, we’re working with a custom object named Beer__c with a field named Type__c that holds our types of beer, e.g. Ale, Lager, Stout, etc.

Why beer? Because beer is both the cause and solution to all of our problems. Clearly.

Step 1: Ordering Apex Results

public with sharing class BeerContacts {

   public static List<Beer__c> getBeers() {
     return [ 
       select Id,Name,Type__c,Country__c
       from Beer__c
       order by Type__c,Name

Step 2: Group the Results into an Array of Objects

    doInit : function(component, event, helper) {
            function(response) {
                // transform into object array
                var result = [];
                var groupName = "";
                var thisGroup = {items : []};
                for (var i=0; i<response.length; i++) {
                    if (groupName != response[i].Type__c) {
                        if (thisGroup.items.length > 0) {
                        groupName = response[i].Type__c;
                        thisGroup = {
                            Name: response[i].Type__c,
                            items : []
                        Id: response[i].Id,
                        Name: response[i].Name

Step 3: Output the Array of Objects into a lightning:select

<lightning:select name="beerId"
             label="Select Beer"
  <option value="">Select Beer</option>    
  <aura:iteration items="{!v.beers}" var="thisBeerGroup">
     <optgroup label="{!thisBeerGroup.Name}">
     <aura:iteration items="{!thisBeerGroup.items}" var="thisBeer">
         <option value="{!thisBeer.Id}">{!thisBeer.Name}</option>

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s