Conditionally render fields on Visualforce page based on picklist values

How Conditional Rendering Works in Visualforce

To conditionally render fields on a Visualforce page based on a picklist value, use the following Visualforce components and attributes together:

• apex:actionRegion: Wraps the controlling picklist and limits the partial page refresh scope to the defined region. This prevents the entire page from re-rendering when the picklist changes.
• apex:actionSupport with event="onchange": Placed inside the controlling picklist's apex:inputField, this tag listens for a change in the picklist value and triggers a partial page re-render of the target page block.
• rendered attribute: Applied to apex:inputField or apex:pageBlockSection elements that should be conditionally shown. The rendered attribute accepts an Apex expression that evaluates to true or false.
• IF() expression: Used in the rendered attribute to check the current picklist value. When the picklist value matches the specified condition, the field or section is shown (rendered="true"). When it does not match, the field or section is hidden (rendered="false").

How the Sample Implementation Works

The controlling picklist (picklistfieldapiname1) is wrapped in an apex:actionRegion. Inside the apex:inputField for the picklist, an apex:actionSupport tag with event="onchange" and rerender="xxxpb1" tells Visualforce to re-render the parent page block (identified by the ID xxxpb1) whenever the picklist value changes.

Two apex:pageBlockSection elements are defined — one for picklist values 1 and 2, and one for picklist values 3 and 4. Each section has a rendered attribute containing an IF() expression that evaluates whether the current picklist value matches the target value. If it does, rendered returns true and the field appears. If not, rendered returns false and the field is hidden.

This means the page updates in real time — when the user changes the picklist selection, only the relevant fields appear, and irrelevant fields are hidden — without a full page reload.
Note: This is a sample implementation pattern and must be customized to match your specific object API names, field API names, and picklist values.

<apex:pageBlock id="xxxpb1">

<apex:pageBlockSection>
                    
<apex:actionRegion >               

  <apex:inputField id="xxxif1" value="{!Object.picklistfieldapiname1}" required="true" >

     <apex:actionSupport event="onchange" rerender="xxxpb1" />
  </apex:inputField>

</apex:actionRegion>
                 
</apex:pageBlockSection>
               
<apex:pageBlockSection id="xxxpbs1" rendered="true">

 <apex:inputField id="xxxif2" value="{!Object.Fieldtobedisplayed1}" rendered="{!IF(Object.picklistfieldapiname1 ='picklist value 1' || lead.Buyer_Type__c ='picklist value 2' ,true,false)}"/>

</apex:pageBlockSection>

<apex:pageBlockSection id="xxxpbs2" rendered="true">

  <apex:inputField id="xxxif3" value="{!Object.Fieldtobedisplayed2}" rendered="{!IF(Object.picklistfieldapiname1 ='picklist value 3' || lead.Buyer_Type__c ='picklist value 4' ,true,false)}"/>  
                                                                     
</apex:pageBlockSection>

</apex:PageBlock>