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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

2 Answers 2

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

You can try this:

$(function() {

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

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});

.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">

  <div style="padding:20px">

    <select id="chkveg" multiple>
      <option value="cheese" data-img="100/109">AAA</option>
      <option value="tomatoes" data-img="100/108">BBB</option>
      <option value="mozarella" data-img="100/107">CCC</option>
      <option value="mushrooms" data-img="100/106">DDD</option>
      <option value="pepperoni" data-img="100/105">EEE</option>
      <option value="onions" data-img="100/110">FFF</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />

  </div>

</form>