Bootstrap Multi-select-在复选框后添加图像

Question

首先是小提琴

我正在尝试在Bootstrap多选插件的复选框之后，每个复选框之后或之前添加图像，以添加缩略图，这是我到目前为止所做的：

1. 在每个选项中直接添加图像，但是此插件会删除所有HTML
2. 使用jQuery after（）在字段后添加图像，但是它不起作用。

HTML代码：

<div class="col-sm-12">
    <div id="vm" class="tab-pane fade in  active">
        <div class="panel panel-primary">
            <div class="panel-body">
                <form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
                <div style="display:none;">
                    <input type="hidden" name="_method" value="POST">
                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
                        <div class="controls">
                            <label for="Server0Vm">hosta0451483t</label>
                            <input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
                            <select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
                                <optgroup>
                                    <option value="ctrlr0451483t">ctrlr0451483t</option>
                                    <option value="ipr0451483t">ipr0451483t</option>
                                    <option value="ldap0451483t">ldap0451483t</option>
                                    <option value="proxy0451483t">proxy0451483t</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>

jQuery代码：

$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonWidth: 'auto',
        numberDisplayed:15,
        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')
                    }
                }
            });
        }
    });
});

任何帮助，将不胜感激。

Answer 1

您可以使用optionLabel选项

optionLabel 用于定义选项标签的回调

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

HTML：

<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
    <optgroup>
        <option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
        <option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
        <option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
        <option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
    </optgroup>
</select>

JSFiddle