Dropdown that filters another dropdown

General Tips Dec 14, 2020

You can have a dynamic list of dropdown options based on the value of another dropdown. You can choose the first dropdown's choice and have the second dropdown only show options based on the first dropdown selected.

A common example of this is to have a user select a country and then show the relevant states based on the country that they selected.

Options structure

Let's say that the Category and Sub-Category are related as shown below.

If you select Mobile in the first dropdown, you'll see the options of only this category. To do this, we need to use conditional statements in the second dropdown. No workflows are required.

Setup

Create 2 dropdowns as you normally would. Fill the Choices of the first dropdown as you'd like. In the second dropdown, fill the Choices with sub-categories of any category. The choices that you mention here don't matter. You can even type your name over here and it won't make any difference, but don't leave it blank or else it won't work.

Go to the Conditionals tab of the second dropdown. Create a new condition that when 1st Dropdown's value is Mobile, the Choices will be as you define.

My first dropdown is called Dropdown category

And that's it. The Choices of the second dropdown will vary depending upon the option selected in the first dropdown.


Editor - https://bubble.io/page?type=page&name=dropdown&id=nocodeassistant-tutorials&tab=tabs-1

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/dropdown-filtering-dropdown


If you need some help with your Bubble app, send me an email at [email protected] or follow me on Twitter.

I also run an official Bubble agency where we can help you bring your idea to life!


Tags