显示图像而不是源引导多选择插件

Question

首先，这是小提琴

我使用引导多重选择为每个复选框生成带有图像的复选框下拉列表。

我使用optionLabel在复选框前添加图像，但是它显示代码而不是显示图像，我已经尝试了几个小时试图找出，任何帮助都将不胜感激。

html

<select id="example-multiple-selected" multiple="multiple" style="display: none;">
    <option value="option-1" data-img="bigstock1.png">Option 1</option>
    <option value="option-2" data-img="bigstock2.png">Option 2</option>
    <option value="option-3" data-img="bigstock3.png">Option 3</option>
    <option value="option-4" data-img="bigstock4.png">Option 4</option>
    <option value="option-5" data-img="bigstock5.png">Option 5</option>
    <option value="option-6" data-img="bigstock6.png">Option 6</option>
</select>

js

$(document).ready(function() {
    $('#example-multiple-selected').multiselect({
        optionLabel: function(element) {
            return '<img src="http://placehold.it/' + $(element).attr('data-img') + '"> ' + $(element).text();
        }
    });
});

Answer 1

您需要设置enableHTML选项，通过配置选项获取更多信息。

$('.multiselect').multiselect({
    enableHTML: true,
    optionLabel: function(element) {
        return '<img src="http://placehold.it/'+$(element).attr('data-img')+'"> '+$(element).text();
    }
});

演示