引导多选择:添加图像而不是文本

Question

首先，下面是链接：http://liveweave.com/We9Qg8

我想把图片添加到一个多选择下拉列表中，我正在使用引导多选择插件，我已经知道如何在每个下拉列表的主文本之后添加文本到下拉列表中。我似乎找不到如何在复选框之后添加图像。

HTML代码：

<div class="example">
            <select id="example-multiple-selected" multiple="multiple" style="display: none;">
                <option value="option-1">Option 1</option>
                <option value="option-2">Option 2</option>
                <option value="option-3">Option 3</option>
                <option value="option-4">Option 4</option>
                <option value="option-5">Option 5</option>
                <option value="option-6">Option 6</option>
            </select>
        </div><!--/.example -->

“联合来文法典”：

$(document).ready(function() {
            $('#example-multiple-selected').multiselect({
                includeSelectAllOption: true,
                allSelectedText: 'No option left ...',
                selectAllText: 'All Libraries',
                buttonText: function(options, select) {
                    return 'Libraries';
                },
                buttonTitle: function(options, select) {
                    var labels = [];
                    options.each(function () {
                        labels.push($(this).text());
                    });
                    return labels.join(' - ');
                },
                optionLabel: function(element) {
                return $(element).html() + '(' + $(element).val() + ')';
            }
            });
        });

任何关于如何添加图片的帮助都将不胜感激。

Answer 1

经过一番研究，我找到了解决这个问题的办法：

这是小提琴

将使用的JS代码如下：

$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonWidth: 'auto',
        numberDisplayed:15,
        enableHTML: true,
        optionLabel: function(element) {
            return '<img src="http://placehold.it/'+$(element).attr('data-img')+'"> '+$(element).text();
        },
        onChange: function(element, checked) {
            //console.log(element.attr('value') + checked);
            $("ul.multiselect-container").find("input[type=checkbox]").each(function(){
                //console.log(element.attr('value'));
                var valueAttr = $(this).attr('value');
                if (element.attr('value') == valueAttr) {
                    var checkParent = $(this).parent().parent().parent().hasClass('active');
                    //console.log(checkParent);
                    if (checkParent == false) {
                        $(this).removeAttr('disabled')
                    }else{
                        $(this).attr('disabled','disabled')
                    }
                }
            });
        }
    });
});