Question

我想在多选的下拉列表中添加图片，我正在使用bootstrap multi-select plugin，我已经想出了如何在每个下拉列表的主要文本后面的下拉列表中添加文本。我似乎无法找到如何在复选框后添加图像。

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代码：

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

经过一番研究后我找到了解决方法：

这里是fiddle

要使用的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')
                    }
                }
            });
        }
    });
});

Bootstrap多选：添加图像而不是文本

1 个答案: