Give a "Blank option name" for dropdown options

Idea
21

No worries!

22

Just to clarify, wouldn’t just creating a workflow using “when element value is changed” for the dropdown, with the condition “this dropdown’s value is empty” > “Reset this input” do the same thing?

I use this workflow to reset my dropdowns to their placeholders or default values.

Or am I misunderstanding the intent?

23

That works to display the placeholder again when the ‘blank option’ is selected, but the ‘blank option’ is still ‘blank’ in the dropdown list…

I think the question is how to change the ‘blank option’ to something else (such as ‘All’ or ‘None’) rather than just seeing a blank space in the dropdown list…

1 Like
24

Ahh okay! Thanks for clarifying.

That would be a nice Bubble native feature to have.

1 Like
25

Another solution in css :

#drop-city-login option:nth-child(2) {
display: none!important;
}

and id of dropdown is drop-city-login

26

Two easy workarounds that seem to work well:

  • with JavaScript

    window.addEventListener(‘load’, () => {
    document.getElementById(“your-element-id”).options[1].text = “the text you want to display instead of the blank”
    })
    This will simply set the text value associated to the blank option.

  • with an option set helper attribute and CSS
    #your-element-id option:nth-child(2) {
    display: none!important;
    }
    The CSS code will hide the blank option
    Then within my option set, e.g. Day, I create an attribute (the helper), e.g. DayDuplicate of the same type Day. Each option has its value in DayDuplicate equal to itself. For instance the option Monday has the value Monday for DayDuplicate. And I create a new option (named “All” or whatever value I want to replace the blank option with), that have no value for the attribute DayDuplicate.

My dropdown was populated with options set, so the second workaround worked well. But I am not sure if it would be a good solution for a dropdown populated with another source

27

Works like a charm, thank you!!