Convert 2 tier to 3 tier dynamic drop down.

[Guest]

Hello Everyone,

I have some code (posted below) that works great to develop a 2 level drop down where the second selection is based on the first.  What I want to do is adapt this to be a 3 level drop down where the second selection is based on the first selection and the third selection is based on the second selection.  I have seen several examples but I am not a coder and do not know java script so I was not able to make them work.  The example below I understand so I would like to use this format. 

Any help would be much appreciated since my deadline is fast approaching.

Thanks

                  <cfif isDefined('form.Park')>

                    <cfset page.Park = form.Park>

                 </cfif>

                <cfoutput>

                 <cfquery name="get_Main_Group" datasource="Landbird_Monitoring">

                    SELECT DISTINCT tbl_Sites.Unit_Code

                    FROM tbl_Sites

                     ORDER BY tbl_Sites.Unit_Code;

                 </cfquery>

                <form name="DropDown" method="post">

                  <select name="Park" required="yes" onChange="this.form.submit()">

                      <option>Park</option>

                    <cfloop query="get_Main_Group">

                   <option value="#Unit_Code#" <cfif isDefined('form.Park')><cfif form.Park eq "#Unit_Code#">selected</cfif></cfif>>#Unit_Code#</option>

                   </cfloop>

                    </select>

             <cfif isDefined('page.Park')>

                      <cfquery name="get_Sub_Group" datasource="Landbird_Monitoring">

                       SELECT DISTINCT tbl_Sites.Unit_Code, tbl_Sites.Site_Name

                                        FROM tbl_Sites

                                        WHERE (((tbl_Sites.Unit_Code)='#page.Park#'))

                                        ORDER BY tbl_Sites.Unit_Code, tbl_Sites.Site_Name;

              </cfquery>

            <select name="Route" required="yes" >

                        <option>Route</option>

                        <cfloop query="get_Sub_Group">

                          <option value="#Site_Name#">#Site_Name#</option>

                        </cfloop>

                      </Select>

                      <br>

                    </cfif>

                </CFOUTPUT>

                  <input name="Submit" type="submit" value="Click Here" formaction="Sum_Bird_SpeciesList_Route.cfm">

  </form>

[sudarshan.t]

[Moved discussion to Developing server-side applications in DW for better responses]

[David_Powers]

ColdFusion has its own dedicated forum, which is where the thread has now been moved.

[Dan_Bracuk]

Are you sure that code actually works?  I didn't try it, but it does not look like it will.

In any event there is an easier way where you can get cf to write your js for you.  The concept is called binding.

Step 1 is to put your queries into a cfc file that is in the same directory as the cfm file with your form.  Each query goes into it's own function.  Then you bind your form fields to those functions.

Google "cfselect bind example" for the details.

[Guest]

Hello Dan,

Hoping you can help me out.  Took your advice and found an example using cfselect bind that I think will work.  It is at:  http://tutorial544.easycfm.com/

So I am trying to get the example to work and I get an error message which states "The path to the CFC must be specified as a full path, or as a relative path from the current template, without the use of mappings."

I did a little research and it sounds like I need to edit the text in the line of code below to account for a pathway.

bind="cfc:data.getStates()"

I have tried every pathway I can think of and it does not work.  Do you know what the code for this line should look like?

the cfc and cfm files are on my computer at:  C:\Internet\Monitoring\vs\Landbird\Data\DataSummaries

the website address where they are shown is:  http://science.nature.nps.gov/im/units/klmn/Monitoring/Landbird/data/datasummaries/FormA.cfm

I also posted the code below in case you wanted to see it:

FormA.cfm

  <cfform name = "form1" action="formB.cfm" method="Post">

State: <cfselect name="states" bindOnLoad="Yes" bind="cfc:data.getStates()" />

City: <cfselect name="city" bindOnLoad="Yes" bind="cfc:data.getCity({states})" />

<cfinput type="submit" name="submit" value="Search">

</cfform>

data.cfc

<cfcomponent output="false">

    <cffunction name="getStates" access="remote" returntype="array">

        <cfquery name="states" datasource="Landbird_Monitoring">

            SELECT DISTINCT state FROM data

            ORDER BY state

        </cfquery>

        <cfset count="1" />

        <cfset results = arraynew(2)>

        <cfloop query="states">

            <cfset results[count][1]="#state#" />

            <cfset results[count][2]="#state#" />

            <cfset count= count+1>

        </cfloop>

        <cfreturn results />

    </cffunction>

    <cffunction name="getCity" access="remote" returntype="array">

        <cfargument name="state" type="string" required="true">

        <cfquery name="cities" datasource="Landbird_Monitoring">

            SELECT DISTINCT city FROM data

            WHERE state = '#state#'

            ORDER BY city

        </cfquery>

        <cfset count="1" />

        <cfset results = arraynew(2)>

        <cfloop query="cities">

            <cfset results[count][1]="#city#" />

            <cfset results[count][2]="#city#" />

            <cfset count= count+1>

        </cfloop>

        <cfreturn results />

    </cffunction>

</cfcomponent>