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

Answer 2

只需将您的代码更改为此，

$('#example-multiple-selected').multiselect({
        enableHTML: true,
        optionLabel: function(element) {
        return ' '+$(element).text();
    }
});

显示图像而不是源 - 引导程序多选插件

2 个答案: