Dynamically populating a <select> from option sets?

I’m trying to make two dropdown menus, with the second menu showing contextual options based on the selection in the first one. (Eg: Category → Subcategory)

What’s the best way to do this?

I started with the top-level category, while hiding the subcategory input until a category is selected.

Starts with a single dropdown (category)
image

Choose a category

Show a secondary dropdown based on selection
image

:point_up: But these options need to change based on the category selection.

My original plan was to dynamically insert the subcategory options:

  • Choice style: Dynamic
  • Type of choices: Needs to be dynamic based on previous selection
  • Was going to create option sets for each, but couldn’t figure out how to dynamically populate the single <select> this way

Would it be better to create unique subcategory dropdowns for each, hide them all by default, and toggle the display for the selected category? Seems inefficient, but would be cleaner to use a single <select> if it’s doable…

This is done through setting up your database correctly. Your category data type has a field which is a list of sub categories that pertain to that parent category. Then in the data source for your subcategory dropdown, you would chose “parent categories’s list of subcategories”

I’m sure I don’t have the syntax exactly right as I’m doing this from memory but that is the general gist.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.