Select this!

Yesterday I had an interesting problem that I had to solve when updating a form page.  We have a sort of registration page that pulls in information for a drop down to describe the different events that the user can attend, and then a drop down select list of the dates for each of the events.  Since I like to account for people who use both Javascript and do not, I coded the selects with option labels, or optgroups.  The Javascript version uses the pre-populated version, but then once a location is selected, it dynamically sets the dependent select list with the dates available for that location using a Javascript array that is populated the same way as the select list.  This might be a little confusing of an explanation, for coders, I’ll explain in the code.

For this example, we have two queries:  qGetLocation which collects the workshop_location and qGetLocationDates which is essentially the same query picking up the dates, the location and a text date.  I won’t bore you with the code for that, or the code that creates the normal location select list.  For the dependent list, we did something a little different - optgroups:

<cfloop query=”qGetLocationDates”>
<cfset newlocation = #qGetLocationDates.workshop_location#>
<cfif newlocation neq oldlocation>         
<cfif optopen>
</optgroup>
<cfset optopen=false>
</cfif>
<optgroup label=”#newlocation#”>
<cfset optopen = true>
<cfset oldlocation = newlocation>        
</cfif>
<option value=”#qGetLocationDates.workshop_date#” <cfif form.date eq “#qGetLocationDates.workshop_date#”>selected</cfif>>#qGetLocationDates.workshop_date_text#</option>
</cfloop>
</optgroup>

So then for the javascript bits, I created a quick and dirty method of an array for the dates and options to get swapped out:

<cfloop query=”qGetLocationDates”>
<cfset locationParameters = ‘{workshop:”#qGetLocationDates.workshop_location#”,date:”#dateformat(qGetLocationDates.workshop_date)#”,dateText:”#qGetLocationDates.workshop_date_text#”}’>
<cfset locationDateList = listappend(locationDateList,locationParameters)>
</cfloop>

then in scripts:

var workshops = new Array(5);
<cfoutput query=”qGetLocations”>
workshops[#qGetLocations.currentRow#] = “#qGetLocations.workshop_location#”;
</cfoutput>

var workshopdates = new Array();   
workshopdates = [<cfoutput>#locationDateList#</cfoutput>];

AND of course the Javascript that clears and updates the select list after the onchange

function update(current,target) {
clearOption(target);
currentIndex = current.selectedIndex;
workshops = current.options[current.selectedIndex].value;
for(i=0; i<workshopdates.length; i++) {
if(workshops==workshopdates[i].workshop){
target.options[target.length] = new Option(workshopdates[i].dateText, workshopdates[i].date); 
target.selectedIndex = 0;
}
}
}
function clearOption(target) {
for (x = target.length; x >= 0; x–) {
target[x] = null;
}
while(target.length > 0) {
target.options[target.length-1] = null;
}

//this part is where the optgroup(s) are deleted, it was tested in FF and IE, it might not work in all situations
while (target.hasChildNodes()) {
target.removeChild(target.firstChild);
}
target.length = 0;
target.options.length = 0;
target.options[0]=new Option(”",”");
//history.go(0);
}

Entry by: amy