'All options' on Dropdowns

Hey everyone :slight_smile:

I’m trying to figure out how to set up a dropdown menu properly!

I’d like viewers to be able to select an ‘All Options’ choice, which filters all the options available. I don’t want users who post on my site to be able to choose ‘All Options’ as that would defeat the purpose of having categories/options to select etc!

I also notice that dropdowns have a blank option at the top (which seems to be ‘All Options’ but I can’t name it). Any help would be appreciated!

Best, /JJ

1 Like

There are a few ways you can set this up.

Option sets:

Static drop down:

play around with the default value and this input should not be empty, depending on what works for your situation.

There’s also a multi select drop down and you could even build a repeating group of options if you want more style.

Hopefully that will start you off on the right track.

The simplest way is just to add an entry to whatever datatype (or option set) you’re using.

Then use that as your ‘All Options’ select option.

Thanks for your response @will.nft.works !

My dropdown is set up like this:

‘This input should not be empty’ does remove the blank option but the user has to refresh the page to get back to seeing ‘All options’! I’d like a way for users to be able to choose ‘All Options’ at the top of the dropdown!

Best, /JJ

Thanks @adamhholmes ,

How do I disable ‘All Options’ from being selected during posting? Users will just choose ‘All Options’ so they appear in every search rather than in specific categories!

Best, /JJ

Just don’t include it in the list of Options.

Here’s a super simple example:

All Options (bubbleapps.io)

Great @adamhholmes - sorry, how does your application know to display all the categories when selecting ‘All Categories’ on the searching dropdown? Is it workflow related?

and… how did you hide it from the creating dropdown (was it workflow or, editing the choices source)?

Thanks, /JJ

I’m unable to minus the ‘All Categories’ item (I can’t just select that option)! What am I doing wrong here? :grimacing:

I’m sure this is simple to do, I’m just not understanding the process!

Best, /JJ

Maybe I don’t understand your question correctly.

If you want to display all options in the repeating group just set the repeating group to display every item in your database on whatever you title that dropdown selection. That’s an easy fix. Explain more if I got it wrong.

@will.nft.works - hey Will!

Sorry! Yep, my repeating group is displaying all the items in my database at the moment. The dropdown menu is set up to filter the repeating group. When users post on my website, they can choose a category for their space to land in (Clubs and Bars for example).

I want the dropdown menu to list an ‘All Options’ option. I can’t add ‘All Options’ as an input for posters because, they will just choose ‘All Options’ instead of a category etc, making their content appear in every search rather than being filtered.

The dropdown menu has an ‘All Options’ option already but, it’s blank (at the top, pictured here). You’ll also see I’ve set the placeholder to ‘All Categories’ but, that’s just the placeholder and doesn’t appear on the list of options:

I either, need a way of giving the blank option the name, “All Options” or, adding All Options to the list and hiding the blank option by clicking ‘This input should not be empty’, not making it as an available option when posting content and, telling my application to display ‘All Options’ when that option is selected on the dropdown!

Hope this clarifies :slight_smile: Appreciate your help,

Best, /JJ

In this case, I’m just using a conditional datasource… but obviously it depends on what you’re trying to do…

But just use the condition when dropdown's value's Select All is No - then do whatever you want with that.

how did you hide it from the creating dropdown (was it workflow or, editing the choices source)?

I just added the relevant search constraint Select All? <> Yes

Of course, another (possibly simpler) option is just to use some custom JavaScript to change what the ‘empty’ option says in the Dropdown.

As in this Example:

All Options JavaScript (bubbleapps.io)

1 Like

This is probably the easiest option! I’ll give this a try.

I’m surprised this isn’t a checkbox option inside the editor!

Another silly question…

How do I add this workflow item?

*edit - I was able to copy and paste it but, interested to know how you set that up!
*edit (again) - there is no focused option for me!

but, it does work…

Thank you!

Best, /JJ

1 Like

I had to copy and paste that expression from the design editor… (for some reason you can’t select that in the workflow editor).

Now, whether that means it’s supposed to work or not is anyone’s guess (it’s possible that it’s not, and that one day Bubble will ‘fix’ that, and it won’t work any more - although I can’t think why they would do that).

But, as you’ve seen, at least currently, it works just fine.

(and yeah, it should be possible to just define the display for the empty option in the editor in Vanilla Bubble, and people have been asking for years… but alas, it’s not. Maybe one day it will be).

1 Like

Damn! Well, I appreciate the fix :slight_smile:

Thank you!

1 Like

Being able to display for the empty option is already on the ideaboard. If you want to see it in Bubble some time in the future you should upvote.

1 Like

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