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.
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 or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.
Join the conversation.