Populate one dropdown based on the selection made in another ? (Combo JS / CF)

Hope this helps

<!--
/* Dynamically populate Workshop select box based on seleted stateID and then Facilitators based on workshopID */
// Create an array to hold Workshops and Facilitators
var WorkshopArray = new Array;
var FacilitatorArray = new Array;
var CohortArray = new Array;

// Define a custom Javascript object type to represent a single Workshop
function Workshop(workshopid, stateid, workshopname)
{
     this.workshopid = workshopid;
     this.stateid = stateid;
     this.workshopname = workshopname;
}

// Define a custom Javascript object type to represent a single Facilitator
function Facilitator(facilitatorid, workshopid, lastName)
{
     this.facilitatorid = facilitatorid;
     this.workshopid = workshopid;
     this.lastName = lastName;
}
<!---New Code for CohortID--->
//Define a custom Javascript object to represent a Cohort
function Cohort(cohortid, facilitatorid, workshopid, name)
{
     this.cohortid = cohortid;
     this.facilitatorid = facilitatorid;
       this.workshopid = workshopid;
     this.name = name;
}

<!--- For each Workshop, append a new Workshop object to the array of Workshops --->
<cfoutput query="GetWorkshops">
     WorkshopArray[WorkshopArray.length] = new Workshop("#JSStringFormat(WorkshopId)#", "#JSStringFormat(StateId)#", "#JSStringFormat(WorkshopName)#");
</cfoutput>

<!--- For each Facilitator, append a new Facilitator object to the array of Facilitators --->
<cfoutput query="GetFacilitators">
     FacilitatorArray[FacilitatorArray.length] = new Facilitator("#JSStringFormat(FacilitatorId)#", "#JSStringFormat(WorkshopId)#", "#JSStringFormat(lastName)#");
</cfoutput>

<!--- NEW CODE FOR COHORTID --->
<cfoutput query="GetCohorts">
     CohortArray[CohortArray.length] = new Cohort("#JSStringFormat(CohortId)#", "#JSStringFormat(FacilitatorId)#","#JSStringFormat(WorkshopId)#", "#JSStringFormat(name)#");
</cfoutput>

/* Fill the Workshop select box based on the stateID*/
function fillWorkshops()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.stateID.selectedIndex == -1)
     {
          return;
     }
     
     var stateID = document.formWorkshops.stateID.options[document.formWorkshops.stateID.selectedIndex].value;
     
     // Remove all options in the Workshop select box
     document.formWorkshops.WorkshopID.options.length = 0;
     var ox=0;
     document.formWorkshops.WorkshopID.options[ox++] = new Option('Select WorkShop', '-1');
     
     // For each item in the Workshoparray ...
     for (var i = 0; i < WorkshopArray.length; i++)
     {
          // If the Workshop's stateIDFK is the same as the currently selected stateID
          if (WorkshopArray[i].stateid == stateID)
          {
               // Put a new option in the Workshop select box
               document.formWorkshops.WorkshopID.options[ox++] = new Option(WorkshopArray[i].workshopname, WorkshopArray[i].workshopid);
          }
     }
     document.formWorkshops.WorkshopID.options.length = ox;
}


/* Fill the Facilitators select box based on the WorkshopID*/
function fillFacilitators()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.WorkshopID.selectedIndex == -1)
     {
          return;
     }
     
     var WorkshopID = document.formWorkshops.WorkshopID.options[document.formWorkshops.WorkshopID.selectedIndex].value;
     
     // Remove all options in the Facilitators select box
     document.formWorkshops.FacilitatorID.options.length = 0;
       var ox=0;
       document.formWorkshops.FacilitatorID.options[ox++]= new Option('Select Your Facilitator','-1');
     
     // For each item in the Facilitatorarray ...
     for (var i = 0; i < FacilitatorArray.length; i++)
     {
          // If the Facilitator's WorkshopIDFK is the same as the currently selected WorkshopID
          if (FacilitatorArray[i].workshopid == WorkshopID)
          {
               // Put a new option in the Facilitator select box
               document.formWorkshops.FacilitatorID.options[ox++] = new Option(FacilitatorArray[i].lastName, FacilitatorArray[i].facilitatorid);
          }
     }
       document.formWorkshops.FacilitatorID.options.length=ox;
}

<!--- NEW CODE FOR COHORTID   && CohortArray[i].workshopid == WorkshopID--->
/* Fill the Cohorts select box based on the FacilitatorID & workshopID that has been Selected*/
function fillCohorts()
{
     // Stop if there is no selected ParentID
     if (document.formWorkshops.FacilitatorID.selectedIndex == -1)
     {
          return;
     }
     
     var FacilitatorID = document.formWorkshops.FacilitatorID.options[document.formWorkshops.FacilitatorID.selectedIndex].value;
     var WorkshopID = document.formWorkshops.WorkshopID.options[document.formWorkshops.WorkshopID.selectedIndex].value;
     
     // Remove all options in the Cohort select box
     document.formWorkshops.CohortID.options.length = 0;
      var ox=0;
      document.formWorkshops.CohortID.options[ox++]= new Option('Select Your Class','-1');
     
     // For each item in the Cohortarray ...
     for (var i = 0; i < CohortArray.length; i++)
     {
          // If the Cohorts's FacilotatorIDFK is the same as the currently selected FacilitatorID
          if (CohortArray[i].facilitatorid == FacilitatorID && CohortArray[i].workshopid == WorkshopID)
          {
               // Put a new option in the Cohort select box
               document.formWorkshops.CohortID.options[ox++] = new Option(CohortArray[i].name, CohortArray[i].cohortid);
          }
     }
      document.formWorkshops.CohortID.options.length=ox;
}

-->
</script>

Then call it in your form
<select name="stateID" onChange="fillWorkshops()">