Visualforce 'onChange' DOM event not firing when dependent picklist changes to default value

Question

I have a VF page where several field's required attribute is dynamically tied to the value selected on a picklist:

<apex:outputPanel id="idAccountField">
   <apex:inputfield value="{!Account__c}" required="{!(dependentPicklist__c == 'Option 1')}" />
</apex:outputPanel>

Since fields' required status needs to change when the dependent picklist is changed, I set the page to rerender all the affected fields whenever there is an 'onChange' DOM event:

<apex:actionRegion>
   <apex:inputfield value="{!dependentPicklist__c}">
      <apex:actionSupport event="onchange" reRender="idAccountField,idAssetField,idProjectField,idRoleField,idErrorMessage"/>
   </apex:inputField>
</apex:actionRegion>

Here's the issue:

dependentPicklist's picklist options are dependent on what is selected on masterPicklist.

In the case where the masterPicklist value is tied to multiple possible dependentPicklist values, then dependentPicklist's value will to revert to '--None--', forcing you to select an available option. This is good, as it triggers the onChange DOM event.

However, in the case where a masterPicklist value is tied to a single dependentPicklist value, then dependentPicklist defaults directly to that value. And although this results in a changed value, the onChange DOM event does not fire.

So am I misunderstanding the nature of the DOM event? How can I ensure that the apex:actionSupport fires whenever dependentPicklist's value changes, regardless of the mechanism of change?

Answer 1

When there is only one value in the picklist, the default value is set by JavaScript and this doesn't trigger the change() event. Because the change event (onchange) requires an actual browser event initiated by the user instead of via JavaScript code.

One solution can be to insert '--None--' when there is only one value and user has to select (create onchange event) the value. In the below code I have explained in detail.

This may not be a exact solution for this issue but can be a workaround.

<apex:page standardController="Book__c" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <apex:form id="theform">
        <apex:inputField value="{!Book__c.Country__c}" id="field1"/>
        <apex:inputField value="{!Book__c.City__c}" required="true" id="field2"/>
    </apex:form>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[id$=field1]').change(function(){
                setTimeout(function(){
                    if($('[id$=field2]').find("option:contains('--None--')").size()==0){
                        $("[id$=field2]").prepend('<option selected="selected">--None--</option>');
                    }
                }, 5);
            });
        });    
    </script>    
</apex:page>