在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属性，第二个空格在下拉菜单中看起来很奇怪：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

方法1 - 更新引导程序 - 选择版本＆gt; 1.7

根据Version 1.7.0中的发行说明：

  

#888，#738：显示＆＃34;标题＆＃34;使用非多重选择时   选项前面有一个空白选项，然后选择该选项   默认。这允许在最初选择时显示标题   加载和＆＃34;没有＆＃34;选项已被选中。

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

使用Stack Snippets进行演示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

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

使用Stack Snippets进行演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

方法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>

使用Stack Snippets进行演示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

另一个选项是将其设置为多选下拉列表，但将所选项目的数量限制为1 。

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

Stack Snippets中的演示

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

JS版：

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

Answer 4

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

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

（如果你想充分利用bootstrap，可以考虑添加我的例子中的额外元素和类。）