Bootstrap Selectpicker 数据潜文本消失

Question

一直在使用 Bootstrap Selectpicker，但是当我将数据内容添加到数据子文本以突出显示颜色的选择时，子文本消失了。尝试了各种方式，但潜台词仍然从下拉列表中消失。有什么想法或解决方法吗？

请原谅缺少代码，我的所有东西都在本地运行，因为我的慢速宽带与 CDN 相冲突。

<select class="selectpicker" data-style="btn-light" data-width="100%" multiple data-max-options="2">
<option data-content="<span class='label label-success'>Choice1</span>" data-subtext="Subtext1">Choice1</option>
<option data-content="<span class='label label-info'>Choice2</span>" data-subtext="Subtext2">Choice2</option>
<option data-content="<span class='label label-warning'>Choice3</span>" data-subtext="Subtext3">Choice3</option>
</select>

Answer 1

这是一种方法/解决方法：

$('select.selectpicker').selectpicker();

.bootstrap-select .filter-option .text-muted {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<select class="selectpicker" data-style="btn-light" data-width="100%" multiple data-max-options="2">
<option data-content="<span class='label label-success'>Choice1 </span> <small class='text-muted'>Subtext1</small>">Choice1</option>
<option data-content="<span class='label label-info'>Choice2 </span><small class='text-muted'>Subtext2</small>">Choice2</option>
<option data-content="<span class='label label-warning'>Choice3 </span><small class='text-muted'>Subtext3</small>">Choice3</option>
</select>

删除了data-subtext 属性并在data-content 中添加了相同的HTML（只需添加CSS 类text-muted，例如：

<option data-content="<span class='label label-success'>Choice1 </span> <small class='text-muted'>Subtext1</small>">Choice1</option>

添加了 CSS 以隐藏所选选项的潜台词。尝试删除它，您会注意到不同之处。

希望这会有所帮助。

编辑

要基于克隆元素使多个选择器工作，而不是添加类 carerClass 和 carerCopy，将它们添加为 ID 或 data- 属性并基于此克隆它们。添加类的问题是selectpicker 初始化会选择这些类并将其添加到生成的引导 HTML 代码中，这会使克隆保持循环并弄乱选择。有关更多详细信息，请检查 non-working fiddle 中克隆元素的 DOM。

1. 更改您添加到 ID 或数据属性的类。

2. 首先克隆选择元素，然后启动选择器。

这是你的小提琴的一个分支：

https://jsfiddle.net/z7xzt96a/