Custom object dependent picklist modal

Question

I have a modal I am popping when the users click a link. The modal will bring up two drop down lists based off a custom object. This custom object has two picklists one of which is dependent on the first selection. However currently all the values show up regardless of the the selection. The configuration is set properly. What is the best way to make the 2nd list change live based on 1st list selection.

<apex:form>
            <apex:selectList size="1">
                <apex:selectOptions value="{!dispositionTypes}"/>
            </apex:selectList>
            <apex:selectList size="1">
                <apex:selectOptions value="{!dispositionSubTypes}"/>
            </apex:selectList>
        </apex:form>

Below is how I am getting values for dispositionTypes/SubTypes

public LIST<SelectOption> getDispositionTypes() {
    List<SelectOption> options = new List<SelectOption>();

    Schema.DescribeFieldResult fieldResult = CallDisposition__c.DispositionType__c.getDescribe();
    List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();

    for( Schema.PicklistEntry f : ple) {
      options.add(new SelectOption(f.getLabel(), f.getValue()));
    }       
    return options;
}

Answer 1

Can you not use apex:inputTextas described here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_quick_start_dependent_picklists.htm

their example shows this VF fragment, where industry and subcategory are controlling and dependent fields respectively:

<apex:page standardController="Account">
<apex:form >
    <apex:pageBlock mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Dependent Picklists" columns="2">
        <apex:inputField value="{!account.industry}"/>
        <apex:inputField value="{!account.subcategories__c}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>