close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Getting started with Dynamic Dropdowns

Tutorial created by Kate Ford

Categories: Data Bridge, Dreamweaver

rating

The filtering capabilities of dynamic dropdowns give your website visitors a way to quickly narrow their search by drilling down from a parent category to a child subcategory. This Getting Started Guide will show you how to create two menu lists that add specific selections to a target list, for example, finding an auto part for a specific car. You can also use dynamic dropdown behaviors to provide Add to List, Remove, Select All, and Move Up or Down options to a form, for example, specifying a group of email addresses in an existing list.

arrow downWhat do you need to start?

  1. Dreamweaver CS4 or higher.
  2. Data Bridge (alternately, Dynamic Dropdowns) installed and activated in Dreamweaver.
  3. Site defined in Dreamweaver with a saved PHP page - Watch video tutorial: Setting up a site in Dreamweaver.
  4. PHP connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.

arrow downConfigure your database

Before you begin using Dynamic Dropdowns, you must ensure that your database is configured properly to display the data you need.

  1. Once you have decided on how you will implement Dynamic Dropdowns, you will need the database tables to support this. Depending on your needs, your database may need more than two tables.

    1. Parent table: One table will be required as the first menu list.
    2. Child table: Another table will be required as the Child table.


    Example: If this were an automotive website, the Parent table would contain all the manufacturers in the content (text) column. The Child table would contain the various models with the manufacturer ID from the Parent table.

  2. The Parent table only requires two columns, one for the ID, another for content. More columns are permitted, but not required.

  3. The Child table must include an ID column, a Secondary key to the Parent table’s ID, and one for the content.
    More details regarding configuring your database can be found in the Context-sensitive help documentation built into the product.

arrow downCreate form lists

With your database configured, your next step is to add the menu/lists to a page on your website. For this example, we will create a menu list for the parent table, another for the child table, and a final list to which we will add our selections.

  1. Parent list

    1. Place your cursor where you wish to insert the Parent list.
    2. In Dreamweaver, go to Insert > Form > Select (List/Menu).
    3. In the ID field enter Parent.
    4. In the Label field enter Parent. (The names for IDs and Labels are tutorial examples.)


    5. Click OK.
    6. Click Yes when asked to add form tag.


    7. Select your new list.


    8. In the Properties Inspector, choose the List radio button.
    9. Set the Height to 10.


  2. Child list

    1. Go to Insert > Form > Select (List/Menu) again.
    2. Enter Child in the ID field.
    3. Enter Child in the Label field.


    4. Click OK.
    5. Select the Child list that was just created.


    6. In the Properties Inspector, choose the List radio button.
    7. In the Height field, enter 10.
    8. Choose the Allow multiple checkbox to allow you to select multiple items from this list.


  3. Target list
    The target list is not necessary for all applications of Dynamic Dropdowns.

    1. Go to Insert > Form > Select (List/Menu) again.
    2. Enter Target in the ID field.
    3. Enter Target in the Label field.
    4. Click OK.

arrow downCreate buttons

Dynamic Dropdowns can apply various behaviors to form buttons to add some useful functionality to your lists. The following steps in this section show how to create each button using Dreamweaver’s built-in functionality. (The subsequent sections will show how to use Dynamic Dropdowns to make these buttons active.)

  1. Create the Add to List button which adds selections from a list/menu to a target list

    1. Choose the Button option from the Forms toolbar.
    2. In the ID field, enter Add.
    3. Leave the Label field blank, and click OK.


    4. Select the button that was just created.


    5. In the Properties Inspector, replace Submit in the Value field with Add to List.
    6. Choose None from the Action options.


  2. Repeat the steps to create the Remove button which removes the selected item(s) in a list.

    1. Choose the Button option from the Forms toolbar.
    2. In the ID field, enter Remove.
    3. Leave the Label field blank, and click OK.
    4. Select the button that was just created.
    5. In the Properties Inspector, replace Submit in the Value field with Remove.
    6. Choose None from the Action options.


  3. Repeat the steps to create the Select All button which selects all the items that are in the list.

    1. Choose the Button option from the Forms toolbar.
    2. In the ID field, enter Select All.
    3. Leave the Label field blank, and click OK.
    4. Select the button that was just created.
    5. In the Properties Inspector, replace Submit in the Value field with Select.
    6. Choose None from the Action options.


  4. Repeat the steps to create the Move Up button which moves the selection above other items in the list.

    1. Choose the Button option from the Forms toolbar.
    2. In the ID field, enter Move Up.
    3. Leave the Label field blank, and click OK.
    4. Select the button that was just created.
    5. In the Properties Inspector, replace Submit in the Value field with Move Up.
    6. Choose None from the Action options.


  5. Repeat the steps to create the Move Down button which moves the selection below other items in the list.

    1. Choose the Button option from the Forms toolbar.
    2. In the ID field, enter Move Down.
    3. Leave the Label field blank, and click OK.
    4. Select the button that was just created.
    5. In the Properties Inspector, replace Submit in the Value field with Move Down.
    6. Choose None from the Action options.


  6. View the completed buttons on your page.

arrow downCreate recordsets

Your parent and child lists will both require recordsets before you apply the Dynamic Dropdowns behaviors.

  1. From the Server Behaviors panel, choose the Add icon.

  2. Choose Recordset.

  3. In the Name field, enter Parent.

  4. Choose your database connection from the Connection list.

  5. Choose the parent table (in the eCommerce database, this is productcategories) from the Table menu list.

  6. Click OK.


  7. Choose the Add icon from the Server Behaviors panel, again.

  8. In the Name field, enter Child.

  9. Choose your database connection.

  10. Select the child table (in the eCommerce database, this is products) from the Table menu list.

  11. Click OK.

arrow downCreate a dynamic list

Next, you will turn the Parent list, created earlier, into a dynamic list. As a dynamic list, the Parent list will be populated with the correct data from the database.

  1. Select the parent list on your page.


  2. In the Properties Inspector, choose the Dynamic option.


  3. In the Options from recordset menu, choose the Parent table.

  4. From the Values menu, choose the CategoryID column.

  5. From the Labels menu, choose the column that contains the CategoryName.

  6. Click OK.

arrow downApply behaviors

Now that your page contains all the necessary elements for your Dynamic Dropdowns application, you will add the necessary behaviors to these elements.

  1. Create the dynamic array

    1. From the Server Behaviors panel, choose the Add icon
    2. Select WebAssist > Dynamic Dropdowns > Create Dynamic Array.
    3. From the Recordset menu, choose the Child table.
    4. From the Parent ID field menu, choose the ParentID column.
    5. From the Child ID field menu, choose the ChildID column.
    6. From the Child Value field menu, choose the column that contains the text or data for the child table.
    7. Click OK.

The following steps utilize the Dreamweaver Behaviors panel, which differs from the Server Behaviors panel.

  1. Populate list from array

    1. From the Window menu, choose Behaviors to open the Behaviors panel.
    2. Select the Parent list.
    3. Choose Add from the Behaviors panel.
    4. Choose WebAssist > WA Dynamic Dropdowns > Populate List from Array.
    5. From the Array source menu, choose the Child table.
    6. From the Source list, choose the parent list.
    7. From the Target list, choose the child list.
    8. Click OK.


    9. Press Ctrl (Cmd) + S to save your page.

arrow downAdd behaviors to buttons

  1. Add to List button

    1. Select the Add to List button on your page.
    2. From the Behaviors panel, choose Add.
    3. Select WebAssist > WA Dynamic Dropdowns > Add Value From Source List To Target List.
    4. From the source list, choose the Child list.
    5. From the Target menu list, choose the Target list.
    6. Click OK.


  2. Remove button

    1. Select the Remove button on your page.
    2. From the Behaviors panel, choose Add.
    3. Select Select WebAssist > WA Dynamic Dropdowns > Remove Selected From List.
    4. From the Target menu list, choose the Target list.
    5. Click OK.


  3. Select All button

    1. Select the Select All button on your page.
    2. From the Behaviors panel, choose Add.
    3. Select Select WebAssist > WA Dynamic Dropdowns > Select All In List.
    4. From the Target menu list, choose the Target list.
    5. Click OK.


  4. Move Up button

    1. Select the Move Up button on your page.
    2. From the Behaviors panel, choose Add.
    3. Select Select WebAssist > WA Dynamic Dropdowns > Change Position of Selected.
    4. From the Target menu list, choose the Target list.
    5. From the Move menu, choose Up.
    6. Click OK.


  5. Move Down button

    1. Select the Move Down button on your page.
    2. From the Behaviors panel, choose Add.
    3. Select Select WebAssist > WA Dynamic Dropdowns > Change Position of Selected.
    4. From the Target menu list, choose the Target list.
    5. From the Move menu, choose Down.
    6. Click OK.


  6. Press Ctrl or Cmd + S to save your page.

  7. Press F12 to preview your dynamic dropdowns and see how they work.

arrow downCommon uses

There are a number of applications for a dynamic dropdown, including providing filtering capabilities for an automobile website. This would allow users to choose their vehicle manufacturer in the first menu, which would then populate the second menu list with options related to that maker. This could even include a third dropdown for specifying more specifics regarding the car.

Another common use for dynamic dropdowns is to allow you to easily provide add, remove, select all, options to an existing menu/list, for example, an email form which contains a list of all possible email addresses. Using dynamic dropdowns you can specify any or all email addresses to send to and have those selections added to the To: field of your contact form.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

Paolo R: 4 Years, 4 Days, 8 Hours, 11 Minutes ago

Thanks for this tutorial - Really helpful

Kate Ford: 4 Years, 4 Days, 7 Hours, 30 Minutes ago

You are welcome! Happy to hear it is helpful.

mmnpinto361034: 3 Years, 7 Months, 3 Weeks, 1 Day, 9 Hours, 41 Minutes ago

Trying to apply a repeat selection (6) and child and target Dynamic Dropdowns does not work any more. I aplly a repeat selection on a table line with 3 Dynamic Dropdowns and don't know how to deal with this. Any help please!!

Anna Robinson: 3 Years, 7 Months, 3 Weeks, 1 Day, 7 Hours, 32 Minutes ago

Sorry - Dynamic Dropdowns is not supported in a repeat selection because the form element names become dynamic in a repeat selection and Dynamic Dropdowns functionality is dependent on referencing the elements by name.

mmnpinto361034: 3 Years, 7 Months, 3 Weeks, 1 Day, 5 Hours, 22 Minutes ago

Thanks for the support!

russell298997: 3 Years, 4 Months, 1 Week, 3 Days, 5 Hours, 43 Minutes ago

DW CC doesnt have a list/menu select option??

rating

Team WebAssist: 3 Years, 4 Months, 1 Week, 3 Days, 4 Hours, 21 Minutes ago

russell298997 - Yes, it's under Insert > Form > Select.
Maybe I'm not understanding the question...?

Rood's Media: 3 Years, 2 Months, 2 Weeks, 2 Days, 5 Hours, 57 Minutes ago

You lost me at making the actual database. MySQL makes no sense to me. It would be nice to have a tutorial on making the DB before hand.

Rood's Media: 3 Years, 2 Months, 2 Weeks, 2 Days, 5 Hours, 49 Minutes ago

Is there sample DB available for use with this tutorial? I am a visual person. I would like to see what I am supposed to be working with or trying to create. Thanks.

rating

Team WebAssist: 2 Years, 9 Months, 1 Week, 5 Hours, 27 Minutes ago



Rood's Media, Thank you for the suggestion. In the meantime, if you aren't familiar with databases at all, go to Watch & Learn > Tutorials and search on mysql database. We have a free database, as well as a tutorial on getting started with databases. Using one of those should get you started in the direction of looking at the database tables and being able to start with the first section of this tutorial.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.