Bootstrap multi-select: Adding images instead of text

Question

firstly here's the link: http://liveweave.com/We9Qg8

I want to add images to a dropdown with multi-select, I am using bootstrap multi-select plugin , I've figured out how to add text to the dropdown after the main text of each dropdown. I can't seem to find how to add images after the checkboxes.

HTML code:

<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 -->

JS Code:

$(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() + ')';
            }
            });
        });

Any help on how to add images would be appreciated.

Answer 1

I found solution to this after a bit of research:

Here's the fiddle

The JS code to be used is as follows:

$(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')
                    }
                }
            });
        }
    });
});