Main page

Implementing multiple dependent drop-down menus (three dependent listboxes)

Description

This example shows how to implement dependent listboxes.

Usage

Select "Computers and Internet" and then "Software" to view the list of related items. Then click on an item to see its details.

Steps to recreate

  1. Use Grid Builder to create the directory_items_states grid (based on the directory_items table in the Internet database) and the search form that includes the category_id and item_id fields.
  2. While in the design mode, modify the search form as follows:
  3. Modify the grid to retrieve values matching the last listbox selection:
  4. Switch to the HTML mode and before the </head> tag add the JavaScript code as shown in the example, excluding the block of code between <!-- BEGIN Grid directory_categories --> and <!-- END Grid directory_items -->.
  5. Use the following steps to create two invisible grids within the JavaScript section, which will be used to output JavaScript arrays containing product categories, subcategories and items:
  6. Delete all HTML tags from the new grid, then add the code <!-- BEGIN Separator -->,<!-- END Separator --> after the Row block.
  7. Enter var SubCategory = new Array( before the Row block and ); after the Separator block.
  8. Inside the Row block add new Array( ) and comma separators (,). Also enclose the label in single quotes as it will output text values.
  9. Use Grid Builder to create the 2nd grid, directory_items , based on the directory_items table.
  10. Delete all HTML tags from the new grid, then add the code <!-- BEGIN Separator -->,<!-- END Separator --> after theRow block.
  11. Enter var Items = new Array before the Row block and ); after the Separator block.
  12. Inside the Row block add new Array( ) and comma separators (,). Also enclose the label in single quotes as it will output text values.
  13. Add <span id="Items"> and </span> tags into the directory_items_states grid, as can be seen in the HTML code of the example.
  14. Add the Before Show event code to the grid as shown, or copy it from the example.
  15. Modify the HTML code near the s_category_id listbox by adding the following code included in the example: onchange="set_child_listbox(this, document.directory_items_statesSearch.s_subcategory_id,SubCategory,'Items');".
    Similarly, near the s_subcategory_id listbox add onchange="set_child_listbox(this, document.directory_items_statesSearch.s_item_id,Items,'Items');" as shown in the example.
    Then near the s_item_id listbox add onchange="reload_page();" as shown in the example.
  16. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used

Database: Internet

Tables: directory_categories, directory_items, states

Events Used

Server Side

Grid's Before Show event - used to hide the Grid when no matching records are found.

Client Side

The following JavaScript functions executed via onchange events were placed directly in HTML: