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:

    Table: atlantic                       Table: central
    ID     NUMBER                         ID     NUMBER
    NAME   VARCHAR2(20)                   NAME   VARCHAR2(20)
    
        **(You will need to use this to reference the column names!)

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.

 <cfquery name="atlantic" datasource="xxxx">
        select *
        from atlantic
 </cfquery>
 <cfquery name="central" datasource="xxxx">
        select * 
        from central
 </cfquery>

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>