A dropdown that filters another dropdown in Bubble

Have you ever seen a dropdown selector on a web form and wished you could change the value of one dropdown based on the other dropdown’s value?How do you make it happen?

A typical example of this is having a user select a country and then show the relevant states based on their chosen country.

This Bubble tutorial will quickly show you how to create such cascading dropdowns.

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. We need to use conditional statements in the second dropdown to do this. No workflows are required.

Setup

Create two dropdowns as you usually 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.

Add a new condition that will show different Choices when the first dropdown’s value is Mobile.

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.

Bookmark

Using Option sets in Bubble.io

Option sets can help you speed up your Bubble.io app. Learn how to use them with dropdowns and radio buttons or create a custom menu.

→

---

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 or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at himanshu@nocodeassistant.com. You can also follow me on Twitter.