隐藏bootstrap-select下拉列表中的默认选定项目

时间:2018-01-22 20:34:30

标签: javascript jquery html bootstrap-select

我似乎无法找到解决方案。我试图隐藏bootstrap-select下拉列表中的默认选定项目,如下所示:

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

在这种情况下,&#39; Mustard&#39;是默认选择的值,不应显示在下拉列表中。任何人都可以帮我这个吗?

更新: 除了ObsidianAge接受的答案之外,我想要注意的是,如果你在bootstrap-select.js中使用它,你应该将CSS更改为:

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

1 个答案:

答案 0 :(得分:2)

假设您只想在下拉列表中隐藏它,并且默认情况下将其隐藏为可见,您只需使用CSS display: none 来定位选项的selected属性:

.selectpicker > option[selected] {
  display: none;
}
<select class="selectpicker">
  <option selected>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

请注意,一旦更改,用户将无法(轻松)再次选择此选项。

希望这有帮助! :)