在没有空元素的 Bootstrap-Select 中显示标题

Question

在Bootstrap-Select 中，如何防止第一个选定的项目显示在标题中。或者，如何从下拉选项列表中隐藏一个空的第一项

在 HTML 中，<select> 元素默认会自动选择第一个 <option> 元素。解决此问题的典型方法是创建一个空白的第一行，但这看起来很奇怪，因为它作为 bootstrap select 暴露的下拉菜单的一部分。

这是我的两个选择：

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

但两者看起来都不是很好。第一个完全忽略title 属性，第二个有一个在下拉菜单上看起来很奇怪的空白：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Answer 1

另一种选择是将其设置为多选下拉菜单，但将所选项目的数量限制为1。

<select class="selectpicker" multiple data-max-options="1" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

堆栈片段中的演示

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>


<select class="selectpicker" multiple data-max-options="1" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Answer 2

方法 1 - 更新 Bootstrap-Select 版本 >1.7

根据Version 1.7.0 中的发行说明：

#888, #738：使用非多选时显示“标题” 选择前会添加一个空白选项，然后由 默认。这允许在最初选择时显示标题 已加载且“否”选项已被选中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

堆栈片段演示：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

方法 2 - 使用 CSS 隐藏空白选项

您可以像这样在下拉菜单中隐藏第一个 <li> 元素（尽管您可能希望将其基于类，因此默认情况下不会发生）。

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}

堆栈片段演示：

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One" >
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

方法 3 - 使用数据属性隐藏空选项

根据@Antiga 的建议，您可以使用data-hidden="true" 隐藏第一个选项，如下所示：

<select class="selectpicker">
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

堆栈片段演示：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Answer 3

只需从选择元素中删除属性标题并确保第一个选项为空：

<div class="form-group">
  <select class="selectpicker form-control">
    <option value=""></option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

（如果您想充分利用引导程序，请考虑添加我示例中的额外元素和类）。

Answer 4

一个JS版本：

$('.selectpicker').selectpicker().each(function () {
    if (this.nodeName == "DIV") {
        $(this).find('ul.dropdown-menu li:first').css('display', 'none');
    }
});