Show title in Bootstrap-Select without empty element

Question

In Bootstrap-Select , how can I prevent the first selected item from appearing in the header. Also, how can I hide the empty first item from the dropdown list

In HTML, the <select> element will automatically select the first default <option> element. A typical way to do this is to create an empty first line, but it looks rather strange as part of a drop-down menu that opens with a bootstrap selection.

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 no one looks very good. The first ignores the title property, and the second has an empty space that looks strange in the drop-down 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> 

Answer 1

Method 1 - Upgrade Bootstrap-Select Version 1.7

In the release notes for Version 1.7.0 :

# 888 , # 738 : Show "title" when using not multiple selection An empty parameter is added to the selection, which is then selected by default. This allows you to display the title when the selection is first downloaded and no.

 <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 fragments :

 <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 an empty option using CSS

You can hide the first <li> element in a drop-down menu like this (although you probably want to base it on a class so that this does not happen by default).

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

Demo with stack fragments :

 .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 an empty option with data attributes

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

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

Demo with stack fragments :

 <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> 

Answer 2

Another option is to set it as a multiple select drop-down list, 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> 

Demonstration in fragments of the stack

 <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> 

Answer 3

JS Version:

 $('.selectpicker').selectpicker().each(function () { if (this.nodeName == "DIV") { $(this).find('ul.dropdown-menu li:first').css('display', 'none'); } }); 

Answer 4

Just remove the attribute header from the select element and make sure the first parameter is empty:

 <div class="form-group"> <select class="selectpicker form-control"> <option value=""></option> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> 

(If you want to take full advantage of the download, consider adding additional elements and classes presented in my example).