chandan chandan - 6 months ago 74
HTML Question

Bootstrap Multi-select - adding images after checkboxes

Firstly here's the fiddle

I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:


  1. Adding images directly in each option but this plugin removes all html in

  2. Used jquery after() to add image after the field but it does not work.



HTML Code:

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

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


Any help would be appreciated.

Answer

You can use optionLabel option

optionLabel A callback used to define the labels of the options

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