Bootstrap-select: Styling real option as a placeholder

Created on 30 Mar 2016  路  5Comments  路  Source: snapappointments/bootstrap-select

I'm speaking about changes introduced in this commit: https://github.com/silviomoreto/bootstrap-select/commit/7c96845298bc76319960ee1add066d940651be6f
If we have the following structure

<select>
<option value="" selected>Standard</option>
<option value="adv">Advanced</option>
</select>

or

<select name="filter">
<option value="" selected>ALL</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

The first option will be styled as a placeholder, even if it has "selected" attribute. But actually it's not a placeholder, it's just the DEFAULT option with empty value (why not?)

Most helpful comment

@sustmi
At version 1.13.10, this issue was resolved as we intended !

All 5 comments

Give the option a value, and it won't style it as a placeholder. The fact that it's selected doesn't matter, since at least one option _always_ has to be selected for a normal select.

In my particular usecase I just overrided placeholder styling in CSS, so it's not a real problem for me. But I want to ask in general:
I NEED a real selectable option (not a placeholder) WITH EMPTY VALUE. Is it incorrect in terms of HTML standard? So my question is: "Is it allowed to use empty values for normal options in selects or it can be used only for placeholders?".

A workaround is to not set the value attribute at all.

<option selected>Standard</option>

It's still valid HTML, and because the value is initially detected by bootstrap-select as "Standard" instead of "", the bs-placeholder class isn't applied.

Unfortunately, the @caseyjhol's workaround (no value argument) does not work well for me because not only bootstrap-select considers the value of option without value argument as "Standard" but the browser itself.
That means, if I submit the form I get:

?parameterName=Standard

instead of expected:

?parameterName=

Is there any way to get an option with an empty value that does not look grayed out?

@sustmi
At version 1.13.10, this issue was resolved as we intended !

Was this page helpful?
0 / 5 - 0 ratings