Action support Rerender not working for dependent picklist

Question

I have created a dependent pick list. I am populating the cities name based on the state but it is not working here is my code

Page

<apex:pageBlock Title="New Case" mode="edit" id="Block">
        <apex:pageBlockSection title="Case Information" id="Block1" columns="2">

            <apex:pageblockSectionItem >
                <apex:outputLabel value="Status"/>
                <apex:outputText value="New"/>
            </apex:pageblockSectionItem>

            <apex:pageblockSectionItem >
                <apex:outputLabel value="Priority"/>
                <apex:selectList size="1" value="{!priority}">
                    <apex:selectOptions value="{!priorities}"/>
                </apex:selectList> 
            </apex:pageblockSectionItem>
            <apex:pageblockSectionItem >
                <apex:outputLabel value="State"/>
                <apex:selectList size="1" value="{!state1}">
                    <apex:selectOptions value="{!states1}"/>
                    <apex:actionSupport event="onchange" reRender="a"/>
                </apex:selectList>               
            </apex:pageblockSectionItem>
            <apex:outputPanel id="a">
            <apex:pageblockSectionItem >
                <apex:outputLabel value="City"/>
                <apex:selectList size="1" value="{!city1}" id="a1">
                    <apex:selectOptions value="{!cities1}"/>
                </apex:selectList>
            </apex:pageblockSectionItem>
          </apex:outputPanel> 
       </apex:pageBlockSection>

Controller code

public class Sample {

public List<SelectOption> getStates1()
    {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));       
        options.add(new SelectOption('TN','Tamil Nadu'));
        options.add(new SelectOption('KL','Kerala'));
        return options;
    }

    public List<SelectOption> getCities1()
    {
        List<SelectOption> options = new List<SelectOption>();
        if(state == 'TN')
        {      
            options.add(new SelectOption('CHE','Chennai'));
            options.add(new SelectOption('CBE','Coimbatore'));
        }
        else if(state == 'KL')
        {      
            options.add(new SelectOption('COA','Coachin'));
            options.add(new SelectOption('MVL','Mavelikara'));
        }
        else
        {
            options.add(new SelectOption('None','--- None ---'));
        }     
        return options;
    }

}

Thanks in Advance. !!!

Answer 1

Try this code, also try to keep the variable/property names more meaningful and simple (it will just make your life easy) :)

VF Page

 <apex:page controller="CtrDependantPicklist" >
 <apex:form >
     <apex:pageBlock Title="New Case" mode="edit" id="Block">
        <apex:pageBlockSection title="Case Information" id="Block1" columns="2" collapsible="true">

            <apex:pageblockSectionItem >
                <apex:outputLabel value="State"/>
                <apex:selectList size="1" value="{!selectedState}">
                    <apex:selectOptions value="{!states}"/>
                    <apex:actionSupport event="onchange" action="{!getCities}" reRender="a"/>
                </apex:selectList>               
            </apex:pageblockSectionItem>
            <apex:outputPanel id="a">
                <apex:pageblockSectionItem >
                    <apex:outputLabel value="City"/>
                    <apex:selectList size="1" value="{!selectedCity}" id="a1">
                        <apex:selectOptions value="{!cities}"/>
                    </apex:selectList>
                </apex:pageblockSectionItem>
          </apex:outputPanel> 
       </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

Controller

public class CtrDependantPicklist {

    public string selectedState {get;set;}
    public string selectedCity {get;set;}
    public List<SelectOption> cities {get;set;}

    public List<SelectOption> getStates() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('None','--- None ---'));       
        options.add(new SelectOption('TN','Tamil Nadu'));
        options.add(new SelectOption('KN','Kerala'));
        return options;
    }

    public PageReference getCities()
    {
        cities = new List<SelectOption>();
        if(selectedState == 'TN')
        {      
            cities.add(new SelectOption('CHE','Chennai'));
            cities.add(new SelectOption('CBE','Coimbatore'));
        }
        else if(selectedState == 'KN')
        {      
            cities.add(new SelectOption('COA','Coachin'));
            cities.add(new SelectOption('MVL','Mavelikara'));
        }
        else
        {
            cities.add(new SelectOption('None','--- None ---'));
        }     
        return null;
    }

}