CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-select
Mikelo
Mikelo

Reputation: 281

Hide default selected item from bootstrap-select dropdown

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

Upvotes: 0

Views: 3389

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42354

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! :)

Upvotes: 2

Related Questions