I have two independent picklists on my page and the values of third picklist are displayed based on both the first and second picklist selection. I have up to fifty picklist values in each field, can anyone suggest me a method to implement this, with a sample example if possible. Thanks.


This is an interesting problem to solve. There are certainly many creative ways to do this in Apex but the challenge is to avoid unnecessary code. If you were to just use conditional branching with if/else blocks, this could involve an enormous amount of code. With 50 values in each of the first two picklists, that's 2,500 unique combinations to account for.

I came up with a design that would reduce this down significantly, though I’m sure it could be improved upon. The thought I had was to use a number for each of the two parent picklists with the first being an order of magnitude less than the second. Since you’re dealing with under 100 items in each list, the numbering could go something like this:

List 1 key/value

  • 100 L1Item1
  • 200 L1Item2
  • 300 L1Item3
  • ...
  • 5000 L1Item50

List 2 key/value

  • 1 L2Item1
  • 2 L2Item2
  • 3 L2Item3
  • ...
  • 50 L2Item50

Then for your third picklist, each item will have a list of number combinations that will cause it to be added to the list, dynamically, which will be refreshed when selected list 1 or 2 items change. This was a fun challenge so I decided to code it up. Here it is:


<apex:page controller="ThreeDependentPicklistsController">
   <apex:form >
      <apex:pageBlock >
         <apex:pageBlockSection columns="1">
            <apex:selectList size="1" value="{!selectedPicklist1}">
               <apex:selectOptions value="{!picklist1}"/>
               <apex:actionSupport event="onchange" rerender="picklist3"/>
            <apex:selectList size="1" value="{!selectedPicklist2}">
               <apex:selectOptions value="{!picklist2}"/>
               <apex:actionSupport event="onchange" rerender="picklist3"/>
            <apex:selectList size="{!numItems}" value="{!selectedPicklist3}" id="picklist3">
               <apex:selectOptions value="{!picklist3}"/>

Apex controller:

public with sharing class ThreeDependentPicklistsController 
   public List<SelectOption> picklist1 {get; private set;}
   public String selectedPicklist1 {get; set;}
   public List<SelectOption> picklist2 {get; private set;}
   public String selectedPicklist2 {get; set;}
   public Integer numItems 
         return this.picklist3.size();
      private set;

   // Possible picklist3 options/matches
   // Key1 Value1 / 101|102|203 (L1Item1+L2Item1|L1Item1+L2Item2|L1Item2+L2Item3)
   // Key2 Value2 / 101|102|303 (L1Item1+L2Item1|L1Item1+L2Item2|L1Item3+L2Item3)
   // Key3 Value3 / 103|201|202|303 (L1Item1+L2Item3|L1Item2+L2Item1|L1Item1+L2Item2|L1Item3+L2Item3)
   // Key4 Value4 / 301|302 (L1Item3+L2Item1|L1Item3+L2Item2)
   // ... and so on for whatever list1+list2 combinations are necessary
   public List<SelectOption> picklist3
         List<SelectOption> retVal = new List<SelectOption>();

         if(this.selectedPicklist1 != null && this.selectedPicklist2 != null) 
            Integer comboNumber = Integer.valueOf(this.selectedPicklist1) + Integer.valueOf(this.selectedPicklist2);
            if(comboNumber == 101 || comboNumber == 102 || comboNumber == 203)
               retVal.add(new SelectOption('Key1', 'Value1'));
            if(comboNumber == 101 || comboNumber == 102 || comboNumber == 303)
               retVal.add(new SelectOption('Key2', 'Value2'));
            if(comboNumber == 103 || comboNumber == 201 || comboNumber == 202 || comboNumber == 303)
               retVal.add(new SelectOption('Key3', 'Value3'));
            if(comboNumber == 301 || comboNumber == 302)
               retVal.add(new SelectOption('Key4', 'Value4'));

         return retVal;
      private set;
   public String selectedPicklist3 {get; set;}

   public ThreeDependentPicklistsController()
      this.picklist1 = new List<SelectOption>();
      this.picklist1.add(new SelectOption('100', 'L1Item1'));
      this.picklist1.add(new SelectOption('200', 'L1Item2'));
      this.picklist1.add(new SelectOption('300', 'L1Item3'));
      this.selectedPicklist1 = '100';

      this.picklist2 = new List<SelectOption>();
      this.picklist2.add(new SelectOption('1', 'L2Item1'));
      this.picklist2.add(new SelectOption('2', 'L2Item2'));
      this.picklist2.add(new SelectOption('3', 'L2Item3'));
      this.selectedPicklist2 = '1';

Again, there's probably an easier way to do this, but this definitely gets the job done. Feel free to copy/paste this code and just enter your specific picklist values.

Happy Holidays


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.