apex:selectList isn't working with apex:actionRegion

Question

I am building a Single App Application and got this error on a vf page:

apex:inputFile can not be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute.

I followed the chosen answer on this post by sfdcfox and added apex:actionRegion but, it created a different problem. It seems that the apex:selectList isn't working if it's nested in apex:actionRegion. When I choose one of the options on the drop-down, I expect it to change the page (i.e. display another section of the page since it's SPA) but nothing happens and no errors, the debug log status shows success.

Please advise

VF Snippet:

<apex:form id="formId">
    <apex:pageBlock title="" mode="edit">
        <apex:pageMessage summary="{!$Label.Read_only_mode_message}" severity="info" strength="2" rendered="{!DRD_Submited}" />
        <apex:pageMessages escape="false" />
        <apex:pageBlockButtons title="">
            <apex:actionRegion>
                <apex:selectList value="{!pageNumber}" size="1>
                    <apex:actionSupport event="onchange" action="{!changePage}" rerender="formId" />
                    <apex:selectOptions value="{!pageList}" />
                </apex:selectList>
                <apex:commandButton action="{!cancel}" value="Cancel" immediate="true" rendered="{!sm.currentVisibleStep < sm.StepMaxVisible}" />
                <apex:commandButton action="{!previous}" value="Previous" rendered="{!sm.currentVisibleStep > 1}" />
                <apex:commandButton action="{!next}" value="Save and Continue" rendered="{!sm.currentVisibleStep < sm.StepMaxVisible && !DRD_Submited}" />
            </apex:actionRegion>
        </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>

Controller:

public Integer pageNumber {get; set;}

public void changePage() {
    save();
    sm.currentStep = pageNumber;
}

public List < SelectOption > getPageList() {
    List < SelectOption > options = new List < SelectOption > ();
    options.add(new SelectOption('', '-- Choose Page --'));
    for (integer i = 1; i < 9; i++) {
        options.add(new SelectOption('' + i, '' + i));
    }
    return options;

}

Answer 1

    <apex:page controller="TestChildClass">

    <script src="https://code.jquery.com/jquery-2.0.2.js"></script>

    <script>
    var j$ = jQuery.noConflict();

    function storeFileData(){
        var fileData = j$( "#fileInput" ).attr( "files")[ 0 ];
        console.log( fileData );
        // do some javascript work with your files here  ...
    }
    </script>
   <apex:form id="formId">

    <apex:pageBlock title="" mode="edit">
        <apex:actionFunction action="{!changePage}" name="changePage" rerender="formId"/>
        <input type="file" id="fileInput" /><button onclick="storeFileData()">Save File</button><br />
        Current Step: {!sm.CurrentStep}<br />
        <apex:selectList value="{!pageNumber}"
                         size="1"
                         onchange="changePage();">
             <apex:selectOptions value="{!pageList}" />
        </apex:selectList>
        <apex:actionRegion id="section2">

         <apex:pageBlockSection title="Section 1" rendered="{!pageNumber = '1'}">
             Section 1 Rendered
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Section 2" rendered="{!pageNumber = '2'}">
             Section 2 Rendered
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Section 3" rendered="{!pageNumber = '3'}">
             Section 3 Rendered
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Section 4" rendered="{!pageNumber = '4'}">
             Section 4 Rendered
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Section 5" rendered="{!pageNumber = '5'}">
             Section 5 Rendered
         </apex:pageBlockSection>
         <apex:pageBlockSection title="Section 6" rendered="{!pageNumber = '6'}">
             Section 6 Rendered
         </apex:pageBlockSection>
            <!--<apex:commandButton action="{!cancel}" value="Cancel" immediate="true" rendered="{!sm.currentVisibleStep < sm.StepMaxVisible}" />
            <apex:commandButton action="{!previous}" value="Previous" rendered="{!sm.currentVisibleStep > 1}" />
            <apex:commandButton action="{!next}" value="Save and Continue" rendered="{!sm.currentVisibleStep < sm.StepMaxVisible && !DRD_Submited}" /> -->
        </apex:actionRegion>
    </apex:pageBlock>
  </apex:form>
</apex:page>

I've updated my solution to address the error that you were receiving - this will work with file inputs and will not error when rerendering form components