9 Replies Latest reply on Apr 8, 2011 8:05 AM by ACS LLC

    creating drop down menus that change dependant upon previous menu

    ACS LLC Level 1

      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

        • 1. Re: creating drop down menus that change dependant upon previous menu
          cfwild Level 1

          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.

           


                                  <cfselect
                                      name="Category"
                                      bind="cfc:quad.GetCategory()"
                                      style="width:387px;"
                                      size="1"
                                      multiple="No"
                                      required="No"
                                      display="Category"
                                      value="Category"
                                      bindonLoad="True">
                                  </cfselect>
                            
                                  <cfselect
                                      name="Channel"
                                      bind="cfc:quad.GetChannel({Category})"
                                      style="width:387px;"
                                      size="1"
                                      multiple="No"
                                      required="No"
                                      display="Channel"
                                      value="Channel">
                                  </cfselect>

          This should get you going.

           

          <cfwild />

          • 2. Re: creating drop down menus that change dependant upon previous menu
            ACS LLC Level 1

            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

            • 3. Re: creating drop down menus that change dependant upon previous menu
              cfwild Level 1

              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:

               

              <cfselect
                  name="Product"
                  bind="cfc:product.getProduct()"
                  style="width:387px;"
                  size="1"
                  multiple="No"
                  required="No"
                  display="product_title"
                  value="product_uid"
                  bindonLoad="True">
              </cfselect>

               

              <cfselect
                  name="Sub Product"
                  bind="cfc:product.getSubProduct({product_uid})"
                  style="width:387px;"
                  size="1"
                  multiple="No"
                  required="No"
                  display="sub_title"
                  value="sub_product_uid">
              </cfselect>

              • 4. Re: creating drop down menus that change dependant upon previous menu
                ACS LLC Level 1

                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

                • 5. Re: creating drop down menus that change dependant upon previous menu
                  Dave Watts Adobe Community Professional

                  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/

                  • 6. Re: creating drop down menus that change dependant upon previous menu
                    Amiya Padhi Level 1

                    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.

                    • 7. Re: creating drop down menus that change dependant upon previous menu
                      Dan Bracuk Level 5

                      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

                      • 8. Re: creating drop down menus that change dependant upon previous menu
                        ACS LLC Level 1

                        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

                        • 9. Re: creating drop down menus that change dependant upon previous menu
                          ACS LLC Level 1

                          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