9

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

4

4 回答 4

13

方法 1 - 更新 Bootstrap-选择版本 >1.7

根据版本 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>

于 2014-12-31T16:51:50.030 回答
4

另一种选择是将其设置为多选下拉菜单，但将所选项目的数量限制为 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>

于 2017-11-18T13:32:34.247 回答
0

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

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

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

于 2016-05-31T11:44:26.953 回答
0

一个JS版本：

$('.selectpicker').selectpicker().each(function () {
    if (this.nodeName == "DIV") {
        $(this).find('ul.dropdown-menu li:first').css('display', 'none');
    }
});
于 2016-04-12T19:34:07.537 回答