Show title in Bootstrap-Select without empty element

Question

In Bootstrap-Select, how can I prevent the first selected item from being shown in the title. Alternatively, how can I hide an empty first item from the list of drop down options

In HTML, the <select> element will automatically select the first <option> element by default. The typical way around this is to create a blank first row, but this looks pretty odd as part of the dropdown menu exposed by bootstrap select.

Here are my two options:

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

But neither look very good. The first ignore the title property entirely and the second has a blank space which looks weird on a dropdown menu:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Solution 1

Method 1 - Update Bootstrap-Select Version >1.7

Per the release notes in Version 1.7.0:

#888, #738: Show "title" when using a non-multiple select A blank option is prepended to the select, which is then selected by default. This allows the title to be shown when the select is initially loaded and "no" options are selected yet.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

Demo with Stack Snippets:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Method 2 - Hide empty option with CSS

You can hide the first <li> element in the dropdown menu like this (although you'd probably want to base it off a class so it didn't happen by default).

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}

Demo with Stack Snippets:

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One" >
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Method 3 - Hide empty option with data attributes

As suggested by @Antiga, you can hide the first option with data-hidden="true" like this:

<select class="selectpicker">
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Demo with Stack Snippets:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Solution 2

Another option is to set it to be a multiple select dropdown, but limit the number of selected items to 1.

<select class="selectpicker" multiple data-max-options="1" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Demo in Stack Snippets

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>


<select class="selectpicker" multiple data-max-options="1" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Comments

[Antiga]

Does <option data-hidden="true">Pick One</option> work? (Without any of the CSS?)

[KyleMit]

@Antiga, great idea! This is much cleaner! In my particular case I'm generating the HTML with MVC which doesn't take too kindly to adding attributes to SelectListItem's, but that's a problem for a different question.

[KyleMit]

I like the idea of going native bootstrap, but this doesn't look like it meets the criteria of "how can I hide an empty first item from the list of drop down options" (example)

[Daniel Duarte]

Ups! That's right. This code hides the title only. It seems I completly miss read the topic.

[Kerisnarendra]

I prefer method 2