Inspiring

Question

creating drop down menus that change dependant upon previous menu

Forum|Forum|14 years ago
April 7, 2011
4 replies
4688 views

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

Advanced techniques

This topic has been closed for replies.

WolfShade

Legend

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,

^ _ ^

James Moberg

Inspiring

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.

A

Amiya_Padhi

Participating Frequently

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.

A

ACS LLCAuthor

Inspiring

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

A

Anonymous

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.

A

ACS LLCAuthor

Inspiring

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

A

Anonymous

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:

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded