Question

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

原谅缺乏代码，因为慢速宽带与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属性并将相同的HTML添加到data-content（这只是要添加的CSS类text-muted的问题，例如：

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

添加了CSS以隐藏所选选项中的子文本。尝试删除它，你会发现差异。

希望这有帮助。

修改

要使多个selectpicker在克隆元素的基础上工作，而不是添加类carerClass和carerCopy，请将它们添加为ID或data-属性，并根据它们进行克隆。添加类的问题是selectpicker初始化选择这些类并将其添加到生成的引导HTML代码中，这使得克隆保持在循环中并使选择混乱。有关更多详细信息，请检查非工作小提琴中克隆元素的DOM。

将您添加的类更改为ID或数据属性。

首先克隆select元素，然后启动selectpicker。

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

https://jsfiddle.net/z7xzt96a/

Bootstrap Selectpicker数据 - 子文本消失

1 个答案: