Cascading pick-lists using apex:actionRegion component in Visualforce page

Requirement:

We had to provide the cascading functionality for dependent pick-list in a Visualforce page based on the selection in the controlling pick-list dynamically. 

Challenge: 

The Visualforce page was a registration form that had pick-lists for the state. But, the OnChange event of the controlling pick-list (country) was not calling the apex function which was responsible to perform the cascading in the dependent pick-list (state). Moreover, we were unable to trace any error while debugging the code.

Solution:

After relentless efforts and trying multiple solutions by digging into standard Salesforce documents, we tried a solution to enclose the <apex:actionsupport> component within <apex:actionRegion> component considering, that this would submit the data that is bound within this region. And, that worked like a gem!

<apex:actionRegion>

  // Your code here

</apex:actionRegion>

Hence, by wrapping the <apex:selectlist> component within <apex:actionRegion>, the input was getting submitted to the controller, thus, allowing it to fire the event.

<apex:pageBlock>
    <apex:pageBlockSection columns="2">
        <apex:pageblockSectionItem>
            <apex:outputLabel value="Country"/>
        </apex:pageblockSectionItem>        
        <apex:pageblockSectionItem>
            <apex:actionRegion>
                <apex:selectList size="1" value="{!country}">
                    <apex:selectOptions value="{!countries}"/>
                    <apex:actionSupport event="onchange" reRender="state"/>
                </apex:selectList> 
            </apex:actionRegion>
        </apex:pageblockSectionItem>
        <apex:pageblockSectionItem>
            <apex:outputLabel value="State"/>
        </apex:pageblockSectionItem>            
        <apex:pageblockSectionItem>
            <apex:selectList size="1" value="{!state}" id="state">
                <apex:selectOptions value="{!states}"/>
            </apex:selectList>
        </apex:pageblockSectionItem>            
    </apex:pageBlockSection>        
</apex:pageBlock>

If you have any questions you can reach out our Salesforce Consulting team here.