Hide picklist based on condition

Question

I have 2 picklists countries & states, when I select a country it brings in the states. But my condition is if countries other than United States and Canada are selected then the state picklist should not be shown,if the countries selected are United States & Canada only then states picklist should be shown. Here is the code I have but I am unable to achieve the above requirement. VF:

 <apex:selectList value="{!fanCountry_Region}" size="1">                                                    
 <apex:selectOptions value="{!countriesList}"></apex:selectOptions>
 </apex:selectList>

 <apex:selectList id="StatesList" value="{!fanState}" size="1">                
 <apex:selectOptions value="{!statesList}"></apex:selectOptions>
  </apex:selectList>

Controller:

public String fanCountry_Region { get; set; }
public String fanState { get; set; }
public List<selectOption> countriesList { 
        set; 
        get{

            List<selectOption> countriesList = new List<selectOption>();
            countriesList.add(new selectOption(' ','--Select--'));

            map<string,Countries__c> countryMap = Countries__c.getAll();
            List<string> countries = new List<string>();
            countries.addAll(countryMap.keySet());
            countries.sort();

            for(string country : countries){

                Countries__c c = countryMap.get(country);
                countriesList.add(new selectOption(c.CountryCode__c, c.Name));
            }

            return countriesList; 
        } 
    }

  public List<selectOption> statesList { 
        set; 
        get{

            List<selectOption> statesList = new List<selectOption>();

            Map<String, States__c> allstates = States__c.getAll();
            Map<string, States__c> states = new Map<string, States__c>();
            for(States__c state : allstates.values()) { 
                if (state.countryCode__c == fanCountry_Region) { 
                    states.put(state.name, state); 
                } 
            }

            List<String> stateNames = new List<String>(); 
            stateNames.addAll(states.keySet()); 
            stateNames.sort(); 

            for (String stateName : stateNames) { 
                States__c state = states.get(stateName); 
                statesList.add(new SelectOption(state.StateCode__c, state.Name)); 
            } 

            if (statesList.size() > 0) { 
                statesList.add(0, new SelectOption(' ', '-- Select One --')); 
            } else { 
                statesList.add(new SelectOption(' ', 'Not Required')); 
            }

            return statesList;  
        } 
    } 

Answer 1

• Use Actionfunction to pass selected Country value to the Controller.

• Use <apex:outputPanel/> for rerendering the state list which is called from actionFunction.

• Use rendered condition in stateList based on Country selection.

Visualforce

<apex:actionFunction name="displayStatesList" action="{!displayStateList}" immediate="true" reRender="stateId">
     <apex:param id="fanCountry_Region" name="fanCountry_Region" value="{!fanCountry_Region}"/> 
</apex:actionFunction>

 <apex:selectList value="{!fanCountry_Region}" size="1" onchange="displayStatesList(this.value)">                                                    
    <apex:selectOptions value="{!countriesList}">
    </apex:selectOptions>
 </apex:selectList>

 <apex:outputPanel id="stateId">
     <apex:selectList id="StatesList" value="{!fanState}" size="1" rendered="{!(fanCountry_Region ='United States' || fanCountry_Region='Canada')}">                
        <apex:selectOptions value="{!statesList}"></apex:selectOptions>
     </apex:selectList>
 </apex:outputPanel>

Controller

public void displayStateList()
 {
    //put a code to load states based on region

 }

Answer 2

You need to add below to logic to control when state pick list needs to be rendered

rendered="{!if(fanCountry_Region=='United States' || fanCountry_Region=='Canada')}"

and then rerender state picklist whenever country picklist value changes using actionSupport

VF code:

<apex:selectList value="{!fanCountry_Region}" size="1">                                                    
 <apex:selectOptions value="{!countriesList}"></apex:selectOptions>
<apex:actionSupport event="onchange" rerender="StatesList"/>
 </apex:selectList>

 <apex:selectList id="StatesList" value="{!fanState}" size="1" rendered="{!if(fanCountry_Region=='United States' || fanCountry_Region=='Canada',true,false)}">                
 <apex:selectOptions value="{!statesList}"></apex:selectOptions>
  </apex:selectList>