I really don’t like that dropdowns have a blank option unless you force users to make a selection, and that’s not always what we (and probably you) need. It’s not straightforward to users that theirs a blank and not just an odd empty space at the top of the dropdown options.
For those who want to get rid of the blank dropdown option, or rather show some text in its place, without having to check the “this input should not be empty” box, here’s what I did:
Install the Toolbox plugin if you haven’t already got it
Add an ID to your dropdown element. Mine is a directory with “listings,” and the dropdown are listing categories, so mine looks like this:
Make sure your dropdown has the “this input should not be empty” box unchecked
Create a workflow with the “Page loaded above fold” condition. If your dropdown is further down the page, you might need to try the “Page loaded (entire)” option.
For your workflow action, choose “Run JavaScript” (requires the ToolKit plugin linked above) and add this line, replacing the bold parts with your dropdown’s ID and whatever text you want to show in the empty dropdown.
document.getElementById(‘YOUR_DROPDOWN_ID_FROM_STEP_2’).options[1].innerHTML = “WHATEVER YOU WANT HERE”;
Mine looks like this: document.getElementById('dropdownListingTypes1').options[1].innerHTML = "All Listing Types";
NOTE: You’ll may have to delete and re-type any single or double-quote marks after pasting the line above into your Run JavaScript workflow action. Code is weird about formatted quotation marks (formatted have a curve to them; unformatted don’t).
Now instead of:
You should see:
(Or whatever text you put in)
For the devs who care, I’m using [1] because Bubble adds a hidden <option> as the first option, so the option in your <select> that appears blank on the front-end is actually position 1 of the array, not position 0 like you’d assume.
if you really don’t want to have dropdown default value empty just add it to a group and add event on dropdown value change (if this dropdown value is empty = reset group) - then it will pick again the default value.
When you click/open your drop-down, does it still have a blank option at the top? And is your “this input should not be empty” box checked or unchecked? I’d love to see screenshots if you’ve actually found a better solution for this.
The main point of my post is that I want my “empty” option to at least show text. I don’t think you’re suggestion would solve that problem, though I’m happy to be proven wrong.
(All Listing Types is technically the “empty” option; I’m just using JS to make it look like it’s not empty so users don’t think they have to filter the page results)
Then for this particual case I would simply add “All listing types” as an actual option and make the dropdown required - based of on this “all” option you can then program all other stuff.
If that dropdown is for filtering - I would event make it default selection for UX so only if user want’s to change that he / she will change it.
If this isn’t the solution for you, that’s fine. None of your suggestions would work for our setup. This one is actually really simple to implement and would work for any setup using a dynamic list for their drop-down options, which don’t make a catchall option easy to implement.
@samnichols This is a great tip but it only seems to work with one dropdown. If you try and give the same Element Id to multiple dropdowns on the page it doesn’t work (or at least not for me).
Good point! Since the “getElementById” function in JavaScript only works with the 1st unique ID it finds, you can give each dropdown a unique ID and just use the JavaScript line multiple times, putting in each unique ID like the example below:
document.getElementById('dropdownListingTypes1').options[1].innerHTML = "All Listing Types";
document.getElementById('dropdownListingTypes2').options[1].innerHTML = "All Listing Types";
document.getElementById('dropdownListingTypes3').options[1].innerHTML = "All Listing Types";
…and so on. You can also change the text you want to display for each one if needed. Just change what’s between the quote marks after the = symbol.
This is brilliant. Thank you so much for this solution. @emmanuel Think the issue will ever be fixed on bubble’s side? Ive read forums from like 2017 about people having this issue, and surely a dropdown box is one of the most used items in the builder.
@mattygb85 you’re welcome! I’m honestly not sure if Bubble will ever address this. And one of the recent updates with dropdowns actually made it so my solution wasn’t working anymore. I had to switch to using an on-page HTML element and put the script in there, but even that only worked if:
the HTML element was hidden on the page at first
The box was checked to not render the element until it is visible
A condition was used to show it after page load (I used “repeating group’s first item is not empty”, but others might have to figure out what condition will work best for their page)
Somehow Bubble had JS overriding the script on page load, hence the workaround. I tried all kinds of ways to force my script to load last, but nothing worked except using an HTML element and making it visible some time after page load.
