Main page

Implementing dependent drop-down menus (dependent listboxes)


This example shows how to implement dependent listboxes.


Select a category and then a product to view product details.

Steps to recreate

  1. Use Grid Builder to create the  store_products grid (based on the store_products table in the Internet database) and the search form that includes category_id and product_id fields.
  2. While in the Design mode, modify properties of the following fields within the search form:
  3. Modfy the grid as follows:
  4. Switch to the HTML mode and add the JavaScript code before the </head> tag as shown in the example, excluding the block of code between <!-- BEGIN Grid store_products1 --> and <!-- END Grid store_products1 -->
  5. Use the following steps to create an invisible grid within the JavaScript section, which will be used to output a JavaScript array with all product categories and product names.
  6. Add <span id="Products"> and </span> tags into the store_products grid, as can be seen in the HTML code of the example.
  7. Modify the HTML near the s_category_id listbox by adding the following code included in the example:onchange="set_child_listbox(this, document.store_productsSearch.s_product_id,Product,'Products');".
    Similarly, near the s_product_id listbox add onchange="reload_page();" as shown in the example.
  8. Make cosmetic changes as needed by modifying the text and captions within the HTML.

Database Tables used

Database: Internet

Tables: store_categories, store_products

Events Used

No CCS events were used, however two JavaScript onchange events with corresponding JavaScript functions were placed directly in HTML.