Question

我正在使用bootstrap select picker进行下拉，它与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>

操作方法。

am使用Bootstrap-select v1.13.2 （https://developer.snapappointments.com/bootstrap-select）

Answer 1

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

例如，在这里，我用字形图标（Bootstrap 3，但您可以使用FontAwesome或其他图标）以及带有自定义内容的span元素创建一个范围：

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

如果要在数据内容中为元素使用自定义属性，则必须在javascript中注册它（选择选择器命令所在），例如：

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

Answer 2

我不确定您想要的是什么，但是尝试将该选项作为

<option style="background-image:url('https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg');background-size:20px 20px;background-repeat: no-repeat ">
chicken
</option>

如何添加自定义HTML引导程序选择器？

2 个答案: