jQuery 在没有空元素的 Bootstrap-Select 中显示标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27723952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show title in Bootstrap-Select without empty element
提问by KyleMit
In Bootstrap-Select, how can I prevent the first selected item from being shown in the title. Alternatively, how can I hide an empty first item from the list of drop down options
在Bootstrap-Select 中，如何防止第一个选定的项目显示在标题中。或者，如何从下拉选项列表中隐藏一个空的第一项
In HTML, the <select>element will automatically select the first <option>element by default. The typical way around this is to create a blank first row, but this looks pretty odd as part of the dropdown menu exposed by bootstrap select.
在 HTML 中，元素默认<select>会自动选择第一个<option>元素。解决此问题的典型方法是创建一个空白的第一行，但作为引导选择公开的下拉菜单的一部分，这看起来很奇怪。
Here are my two options:
这是我的两个选择：
<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>
But neither look very good. The first ignore the titleproperty entirely and the second has a blank space which looks weird on a dropdown menu:
但两者看起来都不是很好。第一个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>回答by KyleMit
Method 1 - Update Bootstrap-Select Version >1.7
方法 1 - 更新 Bootstrap-Select 版本 >1.7
Per the release notes in Version 1.7.0:
根据版本 1.7.0 中的发行说明：
#888, #738: Show "title" when using a non-multiple select A blank option is prepended to the select, which is then selected by default. This allows the title to be shown when the select is initially loaded and "no" options are selected yet.
#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>
Demo with Stack Snippets:
使用 Stack Snippets 进行演示：
<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>Method 2 - Hide empty option with CSS
方法 2 - 使用 CSS 隐藏空选项
You can hide the first <li>element in the dropdown menu like this (although you'd probably want to base it off a class so it didn't happen by default).
您可以<li>像这样隐藏下拉菜单中的第一个元素（尽管您可能希望将其基于类，因此默认情况下不会发生）。
.bootstrap-select ul.dropdown-menu li:first-child {
display: none;
}
Demo with Stack Snippets:
使用 Stack Snippets 进行演示：
.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>Method 3 - Hide empty option with data attributes
方法 3 - 使用数据属性隐藏空选项
As suggested by @Antiga, you can hide the first option with data-hidden="true"like this:
正如@Antiga 所建议的，您可以data-hidden="true"像这样隐藏第一个选项：
<select class="selectpicker">
<option data-hidden="true">Pick One</option>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Demo with Stack Snippets:
使用 Stack Snippets 进行演示：
<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>回答by Nikhil Arora
Another option is to set it to be a multiple selectdropdown, but limit the number of selected items to 1.
另一种选择是将其设置为多选下拉列表，但将所选项目的数量限制为 1。
<select class="selectpicker" multiple data-max-options="1" title="Pick One">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Demo in Stack Snippets
堆栈片段中的演示
<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>回答by pamo
A JS version:
一个JS版本：
$('.selectpicker').selectpicker().each(function () {
if (this.nodeName == "DIV") {
$(this).find('ul.dropdown-menu li:first').css('display', 'none');
}
});
回答by Daniel Duarte
Just remove the attribute title from the select element and make sure the first option is empty:
只需从 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>
(If you want to take full advantage of bootstrap, consider add the extra elements and classes present in my example).
（如果您想充分利用引导程序，请考虑添加我的示例中存在的额外元素和类）。
