jquery - 如何添加自定义 html bootstrap 选择器？

Question

我正在为下拉菜单使用 bootstrap 选择器，它与 ul、li 形成一个下拉列表。

但我想在前面添加一些自定义 html 以显示每个选项的小图像。

https://embed.plnkr.co/SQt0hSykjjWEym0Rj8X4/

在上面的示例中，我们可以看到选项列表，例如鸡肉、火鸡等。我需要添加一个跨度，为每个选项保存一个小图像，

<a tabindex="0" class="" data-tokens="null" role="option"aria-disabled="false">
<span class="{{img}}"></span>
<span class="text">chicken</span>
</a>

如何做到这一点。

我正在使用 Bootstrap-select v1.13.2 ( https://developer.snapappointments.com/bootstrap-select )

Answer 1

我知道这是一个老问题，但它可能会帮助寻找解决方案的人。如果您想添加自定义内容，您必须使用数据属性“content”。

例如，我在这里创建了一个带有字形图标的跨度(Bootstrap 3，但您可以使用 FontAwesome 或其他图标)，以及一个带有自定义内容的跨度元素:

<option data-content="<span class='glyphicon glyphicon-plane'></span>&nbsp;<span class='customClass' data-custom='customvalue'>customText</span>">
</option>

如果你想在数据内容中为你的元素使用自定义属性，你必须在你的 javascript 中注册它(bedofe selectpicker 命令)，如:

var myDefaultWhiteList = $.fn.selectpicker.Constructor.DEFAULTS.whiteList;
//To allow data-custom for span elements
myDefaultWhiteList.span = ['data-custom'];