Javascript 显示图像而不是源代码-引导多选插件

首先，这里是

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

我使用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>

选择1
选择2
选择3
选择4
备选案文5
备选案文6

js

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

$（文档）.ready（函数（）{
$（“#示例多个选定项”）.multiselect({
optionLabel:函数（元素）{
返回“”+$（元素）.text（）；
}
});
});

您需要设置

启用HTML

选项，查看更多信息

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

$（'.multiselect'）。multiselect({
enableHTML:true，
optionLabel:函数（元素）{
返回“”+$（元素）.text（）；
}
});

---

只需将代码更改为

$('#example-multiple-selected').multiselect({ enableHTML: true, optionLabel: function(element) { return ' '+$(element).text(); } }); $（“#示例多个选定项”）.multiselect({ enableHTML:true， optionLabel:函数（元素）{ 返回“”+$（元素）.text（）； } });