CODE CODIFY.CLUB

Bootstrap-Select without empty element ( Hide First Blank Element From Drop-Down )

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 is my solution:
 

FOR BOOTSTRAP
<select class="selectpicker" title="Pick One">
<option value="" data-hidden="true" >Select ANY</option>
<option value="one">one</option>
<option
value="two">two</option>
<option
value="three">three</option>
</select>
 
 
USING CSS ONLY 

#category:focus option:first-of-type {
display: none;
}
 
<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>

V!ral

Developer, Technology aficionado, Beer Lover and founder of codify.club Network. Who shares a keen interest about website development, health issues, cancer awareness and other fun stuff.

Add comment

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed