How To Build Dynamic Dropdown Elements - BUbble

One question that comes up often in Bubble forums is “How can I build a form with dependent dropdown elements?” In other words, how can there be multiple dropdowns on a page, where the options of the second or third dropdown depend on the content of the first one (e.g. picking a city once a country has been selected). We’re going to build an app that does this, and then display a picture of the city that has been selected in the second dropdown.


This is a companion discussion topic for the original entry at https://bubble.io/blog/how-to-build-dynamic-dropdown-elements/
2 Likes

I don’t know why I’m just not discovering this post. I’ve been trying to figure this topic out for…ever.

This is interesting, but is there a way to do the same function, but without having to enter data into two tables?

Can you create dependent dropdown contents based on two different columns of data?

im just trying to display a users discord guilds in a dropdown menu via api of sorts but not sure if it can be achieved

So the idea here is to come up with admin page that allows user of the app to add data, instead of hard coding them? Can the same logic be applied if we dont want it to be user input?

Can you please show what the data in the database look like?

What about having a dynamic element (whatever, dropdown or checkbox) depending on a displayed text ?

I have 2 different tables : one is the question (to be displayed) the other is the answers (good ones and wrong ones). So I first display the question, then I need to display the answers only linked to this question. On my databse, I used a “field type” which is Question’s ID.

Yes, this can be done, same principle. You display the question and then display the answers linked to the question using a search criteria or filter.

Mmmm I see, you used a filter there… But I use myself a text to display the question. When I want to display the options linked to this question, it does not allow me to link to the question…

Here is my database : the options (proposition) are linked to “question”

Then I display the question (random one):

Then I want to display the different options as checkboxes, but I don’t find how to link them to the randomly displayed question:

And the next problem will be : how to display randomly the 4 different options? But it will be a next step…

There is more than one way to work through this particular situation, I will offer one solution (this is the simplest thing that comes to my mind presently).

Since you are creating this logic in the designer and not in the workflow you only have access to the question value. Consequently, you could look up the question by the question text using a filter as I suggested previously, but I don’t personally like this method. So what I would do is this:

  1. Add a hidden text box on the page, search for the random question and add the value of the question’s unique id to that text box.
  2. Then use this unique id value to look up both the question text and the answers.

Screenshot 2022-08-14 at 11.28.40 AM

Alternatively, you could store the random question on a state using a workflow and then you would have access to the question wherever you needed it.

Mmmmmm I understand that using workflow should help me more. Im’ not familiar enough with it so I will dig into it.

And I will try your solution too. Tks

I don’t get how to do that, I can’t store the “value” in a state. I’ll review more videos about workflows, I think I’m missing something somewhere…