creating drop down menus that change dependant upon previous menu

Report · Apr 07, 2011

I need to create a drop down menu and then have the next drop down change its content based on the selection in the previous menu

Would anybody have any code that I could play around with that would help me achieve this?

Thanks!!

Mark

Report · Apr 07, 2011

Hi Mark,

Here is some code that may get you started:

I'm loading the 1st cfselect with a query coming from a .cfc. Also notice the bindonLoad="True". The second cfselect "Channel" is using the select from Category; notice the bind which is pulling query from a differenct function of the same .cfc. Notice the bind, it uses {Category} which is the value selected in the first cfselect.

This should get you going.

Report · Apr 07, 2011

umm I never use the CF form functions, or CFC's, just basic CFM with HTML so I'm slightly confused

I will play with it and read the doc's..

Do you have any simple HTML examples? I'm wondering what the easiest way is to bind them together?

After posting I thought I better post a little more info on what I'm trying to achieve.

Let's say I have a list of products in a table

Table one:

product_uid,product_title

1,product one

2,product two

3,product three

Table two has entries related to table 1, where the product_uid from table 1 above is related back using sub_product_uid in table 2

sub_uid,sub_product_uid,sub_title

1,1,sub product 1 of product 1

2,1,sub product 2 of product 1

3,1,sub product 3 of product 1

4,2,sub product 1 of product 2

5,2,sub product 2 of product 2

6,2,sub product 3 of product 2

7,3,sub product 1 of product 3

8,3,sub product 2 of product 3

So, I have to write a Query to some how get all the products from table 1, and then group them with table 2 for their sub products

Then I have to create a select that lists all the the products from table 1, and upon selecting a product in select box 1, it then changes the values of select box 2 to the appropriate sub products

Thanks

Mark

Report · Apr 07, 2011

Hi Mark,

This should get you close:

Create a .cfc call it product, as in save as product.cfc

You'll need to change the datasource name and the FROM clause below on both queries.

<cfcomponent output="false">

    <cffunction name="getProduct" access="remote" returnType="query">
        <cfset var data="" />
          <cfquery datasource="yourdb" name="data">
            SELECT product_uid,product_title
            FROM yourtable
        </cfquery>
        <cfreturn data>
    </cffunction>

    <cffunction name="getSubProduct" access="remote" returnType="query">
        <cfargument name="product_uid" type="numeric" required="true">
        <cfset var data="" />
        <cfquery datasource="yourdb" name="data">
            SELECT sub_uid,sub_title
            FROM yourtable
            WHERE sub_product_uid = #ARGUMENTS.product_uid#
        </cfquery>
        <cfreturn data>
    </cffunction>

</cfcomponent>

------------------------------------------------------------------------------------------------------

Imbed this in your your cfm page:

Report · Apr 07, 2011

Thanks again! I have a lot to learn

Never actually built a CFC... I'm going to have to try to figure it all out

Is there any way to do it without a CFC???

Thanks!!!

Mark

Report · Apr 07, 2011

Sure. Anything that you do with a CFC, you can do with a CFM page. But it will be a lot easier if you use a CFC, as it'll do a lot of the work for you.

Dave Watts, CTO, Fig Leaf Software

http://www.figleaf.com/

http://training.figleaf.com/

Report · Apr 08, 2011

You appear to be talking about "related selects". There are many ways to accomplish this and a google search will get you good results. The way I do it is like this

http://www.pathcom.com/~bracuk/code/RelatedSelects.htm

Report · Apr 08, 2011

Thanks Dan,

I took a look, ummm ... looked a shade complicated for me, especially once it got into the javascript.

I thought it would have been fairly straightforward to create on of these, perhaps it's just because I've never done one, but they seem more complex that I had hoped!

Mark

Report · May 28, 2020

THANK YOU FOR THIS EXAMPLE!!! I have been trying to find a working example of dependent drop down menus for ColdFusion using binding and yours is the first that actually worked.

Report · Apr 08, 2011

You can do the same using cfm pages also . You just need to make sure that it returns a two-dimensional array, where the first element in each array row is the option value and the second element in the row is the text to display in the option list.

Report · Apr 08, 2011

That would be the way I would want to go

Do you have any examples that you could post?

I know how to create an array, just need to figure out how to configure the CFM

Thanks

Mark

Report · May 28, 2020

We've been doing 3-4 related selects without the use of the CFSelect tag using the jQuery Chained Select plugin using data attributes. (There's also a "remoteChained" method so that you can perform ajax requests.)
https://appelsiini.net/projects/chained/

We chose this alternative because Adobe's CFUI tags tend to uncontrollably throw the CSS & JS to the top of the HTTP response and this can negatively impact performance.

Report · May 29, 2020

Nine year old thread, as of this typing, but it needs to be said. I agree with all the sentiments of "don't use cfselect" (or cfform, or any related tags). The embedded javascript library (ext.js, I believe) is way outdated, and in modern browsers can just not work the way it was intended. Plus, there is nothing better than getting elbow-deep into some code and actually learning how things work.

Now, this is not to say things like jQuery are bad. I love jQuery, and how it does simplify things. But I use jQuery, typically, for things that are very complex and would take days to write my own code. Plus, it makes AJaX calls really easy.

But back to the point. Don't use CFSELECT with bind. It's not too complex to do things like this with vanilla JS or jQuery, with or without plugins. Much more granular control, and you can learn new things. Which is always a good thing.

V/r,

^ _ ^

Adobe Community

creating drop down menus that change dependant upon previous menu