Forms7 Cascading Dropdown child not populating

Question

I've been following the video tutorial on using select boxes, and creating cascading dropdowns. The first level populates as expected, however the second child list is not populating. Looking at the console there are no errors.

$("#StateSelect").Forms7LoadDDL({
    listName: "States",
    firstOptionText: "Select State",
    fieldName: "Title",
    childID: "CitySelect",
    childList: "Cities",
    childParentField: "State",
    childField: "Title",
    childOptionText: "Please Select City",
    completefunc: function() {
        alert("Parent Select Loaded");
    },
    childCompletefunc: function(){
        alert("Child Select Loaded");
    },
}); 


Title: <input type="text" id="TitleField" listFieldName='Title' class='required' >   <br/><br/>
Email: <input type="text" id="EmailField" listFieldName="email" > <br/><br/>
State: <select id="StateSelect"></select><br/><br/>
City:  <select id="CitySelect"></select><br/><br/>

Answer 1

Do the following changes

<select id="StateSelect"  onchange="LoadCities(this.value);"></select>

$(document).ready(function() {
    $("#StateSelect").Forms7LoadDDL ({
        listName: "States", 
        firstOptionText: "Select State",
        fieldName: "Title"
    });      
});

function LoadCities(stateID) {
    $("#CitySelect").Forms7LoadChildDDL({
        parentID: stateID,
        parentField: "State",
        listName: "Cities", 
        firstOptionText: "Select City",
        fieldName: "Title"
    });
}