javascript - 显示图像而不是源 - bootstrap 多选插件

Question

首先是fiddle

我正在使用 bootstrap multiselect为每个复选框生成带有图像的复选框的下拉列表。

我已经使用 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选项，通过Configuration Options了解更多信息。

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

DEMO