3 Dropdowns Updated Dynamically via database and selections

I have a web form, with 3 category levels and I want to populate the choices in each subsequent dropdown box based on the choice of the previous box dynamically and via a database call.

For Example:

MySQL database has a Categories table that has 3 columns, product_id, category_name, and parent_id. Top level categories have a parent_id of (NULL). So when the form is loaded a query to the db is made retrieving all category names with a parent_id of null. When the user chooses one of those options in the form, I need the next drop down box (or maybe I should use the same dropdown and create a breadcrumb trail above it?) to be updated by querying the database for all category names with a product_id matching the chosen category. There is a maximum of 3 levels deep, so that process may need to be repeated once more possibly.

The form then allows the user to add an item to the database under the chosen category. Basically a products database that is searchable via category.

Hope I’ve explained that fully. The site is written currently in PHP and queries against a database that I am updating by hand when they come out with new products. They want the ability to add their own products which is why I am attempting to build this form for them.

Thanks in advance!


What your referring to is commonly called a linked list which can become quit difficult to build. Depending on the number of categories present it may be easier to use a select with a size. Than indent children. Something like the below picture. That will be much simpler to implement than a linked list and won’t need to worry about graceful degradation as you might with a linked list.

I would suggest using jQuery Related Selects.
It’s very easy to implement. https://github.com/ehynds/jquery-related-selects/tree/master/src