Creating Dynamic Select Boxes

Using ColdFusion, JavaScript and WDDX to Create a Dynamic Select Box.

I will discuss the use of ColdFusion, JavaScript and a new (and increasingly useful) technology WDDX (Web Distributed Data Exchange wddx.org) to create the dynamic select box.

I will use the following example to illustrate my point. My first select box contains two options: "atlantic" and "central" (these are two divisions within the Eastern Conference of the NBA). If the user selects "atlantic" he/she will see only the teams that belong to the Atlantic division. If the user selects "central" he/she will only see the teams that belong to the Central division.

First of all, we need information in our database. In this example we are using Oracle, but you can use any database you feel comfortable with. In this example I have set up two tables:

Now, we need to include the correct javascript functions. It is really not necessary to understand how this works, but that you understand what is returned from these functions. (The following scripts come with ColdFusion so you can view the functions if you so desire).

<script type="text/javascript" language="javascript" src="/CFIDE/scripts/wddx.js">
</script>

I will use the following example to illustrate my point. I have one select box that contains atlantic as one option and central as another option (these are two divisions within the Eastern Conference in the NBA). If the user selects the atlantic choice, only the teams that are in the atlantic division will be choices in the second select box. Ditto for the central option. Now, on with the explanation?

Next, we want to query the database?keep track of the names of the queries.

Below is how we serialize from ColdFusion to Javascript. Make certain that there is not a space between the beginning and ending wddx tags!

Serialize the atlantic query:

<cfwddx action="cfml2js" input="#atlantic#" toplevelvariable="jsatlTLV" output="jsatlantic">
</cfwddx>

Serialize the central query:

<cfwddx action="cfml2js" input="#central#" toplevelvariable="jscentTLV" output="jscentral">
</cfwddx>

NOTE: Make certain there are no spaces between the beginning and end wddx tags.

Now we are going to process the info from the two serializations above. I put output tags here so that it would print out the results of the serialization so that you could view the source and see what is actually happening.

In the function populate() you can see what is happening. It is checking to see what was selected in the first select box (named Eastern).

You can reference these options by using the selectedIndex property. If the first option is selected the selectedIndex would = 0 (it is always n-1).

<script language= "javascript"> <cfoutput>#jsatlantic# #jscentral# </cfoutput>
    function populate()
    {
        document.DynamicForm.DynamicSelect.length=0;    //need this to set number of options to zero
        if (document.DynamicForm.Eastern.selectedIndex == 1)
        {
           for (var i=  0;i <  "jsatlTLV.id.length" ;i++) <--no quotes here     
           {
               NewOpt =  new Option;    //same as the HTML option > tag 
               NewOpt.value = jsatlTLV.id[i];   //same as option value=[id]>
               NewOpt.text = jsatlTLV.name[i]; //now we have optionvalue=[id]>[name]
               document.DynamicForm.DynamicSelect.options[i] =  NewOpt; //put the new option in the select box
            }
            document.DynamicForm.DynamicSelect.options[0].selected = true;    //make the first option selected
        }

      if (document.DynamicForm.Eastern.selectedIndex == 2)
      {
         for (var i=  0;i<  "jscentTLV.id.length";i++)   >--no quotes here     
         {
              NewOpt = new Option;        //same as the HTML option; tag
              NewOpt.value = jscentTLV.id[i];    //same as option value=[id]
              NewOpt.text = jscentTLV.name[i]; //now we have optionvalue=[id]>[name]
              document.DynamicForm.DynamicSelect.options[i] =  NewOpt; //put the new option in the select box
         }
         document.DynamicForm.DynamicSelect.options[0].selected = true; //make the first option selected
      }
   }
</script>