Visualforce - Multi-Level Rendering

Question

I am trying to render 2 additional field levels in Visualforce using rerender function. Is this possible? I have the first level working, but unable to get the last level working properly. Any advice is appreciated.

Requirements:

1. If OTT_Managed__c = True/Checked render level 1 field "Additional_Targeting__c"

2. If Additional Targeting__c = "Some Value", render level 2 field called "Desired_Audience__c"

Visualforce:

<apex:pageBlockSection >
     <apex:pageblockSectionItem >
     <apex:actionRegion >
     <apex:inputField value="{!Opp.OTT_Managed__c}" label="OTT Managed">
     <apex:actionSupport event="onchange" action="{!null}" rerender="op0"/>
                                </apex:inputField>
                            </apex:actionRegion>
                    </apex:pageblockSectionItem>
            </apex:pageBlockSection>

            <apex:pageBlockSection id="op0" columns="1" >
                <apex:pageblockSectionItem rendered="{!Opp.OTT_Managed__c}">
                    <apex:outputLabel style="color:red;font-size:12px;font-weight:750">Additional Targeting</apex:outputLabel>
                        <apex:actionRegion >
                            <apex:inputField value="{!Opp.Additional_Targeting__c}" style="color:red;" label="Addl Target"/>
                            <apex:actionSupport event="onchange" action="{!null}" rerender="op1,op3"/>
                        </apex:actionRegion> 
                </apex:pageblockSectionItem>
                </apex:pageBlockSection>

             <apex:pageBlockSection id="op1">
                <apex:pageblockSectionItem rendered="{!Opp.Additional_Targeting__c == 'Some Value'}">
                    <apex:outputLabel style="color:red;font-size:12px;font-weight:750">Desired Audience</apex:outputLabel>
                        <apex:actionRegion >
                            <apex:inputField value="{!Opp.DesiredAudience__c}" style="color:red;" label="Desired Audience"/>
                        </apex:actionRegion> 
                </apex:pageblockSectionItem>
            </apex:pageBlockSection>

Answer 1

This might be because the 'onchange' is not firing when there is more than one input field displayed on the screen.

If you press return after changing the first input field, the next field is displayed. But since there are then two input fields, pressing return after changing the second one does not seem to trigger the 'onchange' event.

You could rerender by using a commandbutton -

<apex:commandButton action="{!null}" value="Save" id="theButton" rerender="op1, op0"/>

Alternatively, define an actionFunction and then call that from inline onchange, getting rid of the actionRegion.

<apex:inputField value="{!Opp.Additional_Targeting__c}" style="color:red;" label="Addl Target" onchange="rerender()"/> `

<apex:actionFunction name='reRender' reRender='op1, op2'/>