How to select a value in one <apex:selectList> based on a selected value in another <apex:selectList>?

Question

I have two apex:selectList in my page -

<apex:outputPanel id="DocumentPageBlock">
    <apex:form>
        <apex:pageBlock title="Add Documents" mode="edit">
            <apex:pageBlockSection title="Information" columns="2">
                <apex:inputField value="{!savedDocument.Name}" />
                
                <apex:selectList id="firstDropdownValues" multiselect="false" size="1" value="{!firstSelectedValue}" label="First Dropdown Values">
                        <apex:selectOptions value="{!firstSelectedValueOptions}" />
                        <apex:actionSupport event="onchange" action="{!onFirstDropdownValueChange}" />
                </apex:selectList>

                <apex:selectList id="secondDropdownValues" multiselect="false" size="1" value="{!secondSelectedValue}" label="Second Dropdown Values">
                        <apex:selectOptions value="{!secondSelectedValueOptions}" />
                </apex:selectList>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:outputPanel>

Both the dropdowns have some values in the dropdown. I have a requirement to change the selected value in dropdown with id 'secondDropdownValues' based on the selection in dropdown with id 'firstDropdownValues'. In my controller classs I have map which stores mapping between Ids of first dropdown and corresponding select option in second dropdown -

Map<Id, List<SelectOption>> firstToSecondDropdownValuesMap;

This map is correctly populated and has all the required values. The method that I currently have to set the values in the second dropdown, which is not working -

public void onFirstDropdownValueChange() {
    secondSelectedValue = (firstToSecondDropdownValuesMap.get(firstSelectedValue))[0].getValue();   
}

What am I doing wrong here ? Please note that I do not want to change the values in dropdown, I just want the selection to change.

Edit 1 - As suggested by @jagmohan, code was missing reRender="secondDropdownValue". But I am observing one more problem. After adding it the event works properly only if I don't have any other apex:inputField. If I have any other fields along with the dropdowns (updated the code with it), and if I set required="true" for that field then again the event stops firing. What could be the reason and solution for that ?

Answer 1

To overcome the issue where it stops working when adding more required fields to the form, you need to use apex:actionRegion and wrap the two select lists along with the apex:actionSupport in it. The main use of apex:actionRegion is to limit the number of fields which get processed by the server for AJAX request fired by the apex:actionSupport. So when we wrap the fields in it, we are basically limiting the number of fields to be sent to the server to be just the two select lists.

Try making changes to your code as per the below snippet and let me know it goes

<apex:outputPanel id="DocumentPageBlock">
    <apex:form>
        <apex:pageBlock title="Add Documents" mode="edit">
            <apex:pageBlockSection title="Information" columns="2">
                <apex:inputField value="{!savedDocument.Name}" />
                <!-- wrap the select lists in action region -->
                <apex:actionRegion>
                    <apex:selectList id="firstDropdownValues" multiselect="false" size="1" value="{!firstSelectedValue}" label="First Dropdown Values">
                        <apex:selectOptions value="{!firstSelectedValueOptions}" />
                        <apex:actionSupport event="onchange" action="{!onFirstDropdownValueChange}" reRender="secondDropdownValues" />
                    </apex:selectList>

                    <apex:selectList id="secondDropdownValues" multiselect="false" size="1" value="{!secondSelectedValue}" label="Second Dropdown Values">
                        <apex:selectOptions value="{!secondSelectedValueOptions}" />
                    </apex:selectList>
                </apex:actionRegion>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:outputPanel>