Hide default selected item from bootstrap-select dropdown

Question

I can't seem to find the solution for this. I'm trying to hide the default selected item from a bootstrap-select dropdown like the following:

<select class="selectpicker">
  <option selected>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

In this case, 'Mustard' is the default selected value and shouldnt be shown in the dropdown. Can anyone help me with this?

UPDATE: In addition to the accepted answer by ObsidianAge I wanted to note that if you're using this with bootstrap-select.js you should change the CSS to:

.dropdown-menu.inner > li.selected {
  display: none;
}

"Just like a html select" how does standard HTML hide the selected option? — Luca Kiebel, Jan 22 '18 at 20:36
Do you only want to hide it in the *dropdown*, or do you want to make it look as though it's not selected either? — Obsidian Age, Jan 22 '18 at 20:37
maybe that's what you're looking for : https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css — scraaappy, Jan 22 '18 at 20:42

score 2 · Accepted Answer · answered Jan 22 '18 at 20:46

Assuming you only want to hide it in the dropdown and not hide it as visibly selected by default, you can simply use CSS' display: none to target the selected attribute of the options:

.selectpicker > option[selected] {
  display: none;
}

<select class="selectpicker">
  <option selected>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Note that once changed, the user will not be able to (easily) select this option again.

Hope this helps! :)

Simple but very effective solution! Stupid that I didn't thought of that earlier.. Many thanks! — Mikelo, Jan 22 '18 at 21:52

Hide default selected item from bootstrap-select dropdown

1 Answers1