+ Start a Discussion
aditya3aditya3 

Multi-Level picklist

Hi ,
I am having a 3 tier dependent picklist
If the user selects country India then Indian states will displays depending on the state city will display //similarly for all

Here I have tried the code like this
<apex:page controller="sample">
   
    <apex:form >
  <style>
 
   .city
   {
   margin-left: 124px;
   }
   
   </style>
                <apex:outputLabel value="country"/>
                         
                <apex:selectList size="1" value="{!country}">
                    <apex:selectOptions value="{!countries}"/>
                    <apex:actionSupport event="onchange" reRender="a"/>
                </apex:selectList>               
           
                <apex:outputLabel value="Stated"/>
                         
                <apex:selectList size="1" value="{!state}">
                    <apex:selectOptions value="{!states}"/>
                </apex:selectList>               
           
                <apex:outputLabel value="City" styleClass="city"/>
           
                <apex:selectList size="1" value="{!city}" id="a">
                    <apex:selectOptions value="{!cities}"/>
                </apex:selectList>
            

    </apex:form>

</apex:page>

--------controller class -----
public class sample
{

    public String textValue { get; set; }

    public String getInputValue() {
        return null;
    }
    public string country {get;set;}
    public String state {get;set;}
    public String city {get;set;}

   
   public List <SelectOption> getcountries()
   {
     List<SelectOption> options = new List<SelectOption>();
         options.add(new SelectOption('None','--- None ---'));       
         options.add(new SelectOption('IND','INDIA'));
         options.add(new SelectOption('PAK','PAKISTHAN'));
         options.add(new SelectOption('AUS','AUSTRALIA'));
         options.add(new SelectOption('NZ','NEWZELAND'));
         return options;
    }
   
    public List<SelectOption> getStates()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(country == 'IND')
        {
        options.add(new SelectOption('None','--- None ---'));       
        options.add(new SelectOption('TN','Tamil Nadu'));
        options.add(new SelectOption('KL','Kerala'));
        options.add(new SelectOption('AP','Andhra'));
        options.add(new SelectOption('TL','Telangana'));
        }
        return options;
        }
        
        else if(country == 'PAK')
        {      
            options.add(new SelectOption('ISB','ISLAMABAD'));
            options.add(new SelectOption('LAH','LAHORE'));
        }
        else if(country == 'AUS')
        {      
            options.add(new SelectOption('SYD','SYDNEY'));
            options.add(new SelectOption('MEL','MELBOURNE'));
        }
        else if(country == 'NZ')
        {      
            options.add(new SelectOption('AUC','AUCKLAND'));
            options.add(new SelectOption('WL','WELLINGTON'));
        }
       else
      {
      return options;
      }
   
      }
   
    public List<SelectOption> getCities()
    {
        List<SelectOption> options = new List<SelectOption>();
        
        if(country == 'IND')
        {
        if(state == 'TN')
        {      
            options.add(new SelectOption('CHE','Chennai'));
            options.add(new SelectOption('CBE','Coimbatore'));
            options.add(new SelectOption('mdh','madurai'));
            options.add(new SelectOption('kk','Kumbakonam'));
        }
        else if(state == 'KL')
        {      
            options.add(new SelectOption('COA','Coachin'));
            options.add(new SelectOption('MVL','Mavelikara'));
        }
          else if(state == 'AP')
        {      
            options.add(new SelectOption('vij','vijayawada'));
            options.add(new SelectOption('gnt','Guntur'));
             options.add(new SelectOption('chr','cheerala'));
              options.add(new SelectOption('ong','ongole'));
         }
          else if(state == 'TL')
        {      
            options.add(new SelectOption('Hyd','Hyderabad'));
            options.add(new SelectOption('wl','warangal'));
            options.add(new SelectOption('kr','karimnagar'));
            
         }
         
         else
         {
              return options;
         }     
         
     
                  
          
          if(country == 'PAK')
        {
          if (state == 'ISB')
            {
            options.add(new SelectOption('kar','Karachi'));
            options.add(new SelectOption('raw','Rawalpindi'));
             }        
         else  if (state == 'LAH')
          {
            options.add(new SelectOption('FAR','FARIDABAD'));
            options.add(new SelectOption('SEH','SEHZAD'));   
          }
         else
         {    
        return options;
         }      
          
         if(country == 'NZ')
        {
          if (state == 'AUC')
            {
            options.add(new SelectOption('gup','guptil'));
            options.add(new SelectOption('ross','rosstaylor'));
             }        
         else  if (state == 'WL')
          {
            options.add(new SelectOption('mec','meculum'));
            options.add(new SelectOption('shan','Shanebond'));   
          }
         else
         {    
        return options;
         }
                
        if(country == 'AUS')
        {
          if (state == 'SYD')
            {
            options.add(new SelectOption('mark','markwaugh'));
            options.add(new SelectOption('stev','stevwaugh'));
             }        
         else  if (state == 'MEL')
          {
            options.add(new SelectOption('ricky','rickyponting'));
            options.add(new SelectOption('smith','smithstone'));   
          }
         
      
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }     
        return options;
    }      
}  
}
}
}
}

Please do the needful

 
Sumitkumar_ShingaviSumitkumar_Shingavi
Hello Aditya,

Your apex controller looks correct. You need to modify your visualforce page. Try below code:
<apex:page>
	
	<style>
		.city {
			margin-left: 124px;
		}
	</style>
	
	<apex:form >		
		<apex:outputLabel value="Country"/>		 
		<apex:selectList size="1" value="{!country}">
			<apex:selectOptions value="{!countries}"/>
			<apex:actionSupport event="onchange" reRender="mystates, mycities"/>
		</apex:selectList>

		<apex:outputLabel value="State"/>		 
		<apex:selectList size="1" value="{!state}" id="mystates">
			<apex:selectOptions value="{!states}"/>
			<apex:actionSupport event="onchange" reRender="mycities"/>
		</apex:selectList>               

		<apex:outputLabel value="City" styleClass="city"/>
		<apex:selectList size="1" value="{!city}" id="mycities">
			<apex:selectOptions value="{!cities}"/>
		</apex:selectList>
	</apex:form>
</apex:page>

Hope this helps! If yes, then mark it as solution.

Thanks,
Sumit
Ajay K DubediAjay K Dubedi
Hi Aditya,

Use This Link for the solution of your problem.
https://www.sundoginteractive.com/sunblog/posts/displaying-dependent-picklist-fields-on-a-visualforce-page