从 bootstrap-select 下拉列表中隐藏默认的 selected 项目

Question

我似乎找不到解决方案。我正在尝试从 bootstrap-select 下拉列表中隐藏默认的 selected 项目，如下所示：

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

在这种情况下，'Mustard' 是默认的 selected 值，不应显示在下拉列表中。谁能帮我解决这个问题？

更新：除了 ObsidianAge 接受的答案之外，我还想指出，如果您将此与 bootstrap-select.js 一起使用，您应该将 CSS 更改为：

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

Answer 1

假设您只想将其隐藏在下拉列表中并且 而不是 将其隐藏为默认 select 可见，您可以简单地使用 CSS' display: none 以选项的 selected 属性为目标：

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

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

请注意，一旦更改，用户将无法（轻松）再次select此选项。

希望对您有所帮助！ :)

Hide default selected item from bootstrap-select dropdown