引导选择器数据-潜文本消失 [英] Bootstrap Selectpicker data-subtext disappears

问题描述

一直在使用Bootstrap SelectPicker，但当我将Data-Content添加到Data-Subtext以用颜色突出显示所选内容时，该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>

推荐答案

以下是实现此目的的一种方法/解决方法：

$('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以隐藏所选选项中的潜文本。试着去掉它，您就会注意到不同之处。

希望这对您有帮助。

编辑

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

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

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

这是你的小提琴叉子：

https://jsfiddle.net/z7xzt96a/

这篇关于引导选择器数据-潜文本消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！