Select2: Images in options
data must be supplied as
data: <JSON data with id, text and img>
in real cases
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<select class="example1" style>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>
<select class="example2" style>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>
<select class="example3" style>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>
JavaScript
var example1 = $('.example1').select2({
width: '30%'
});
var example2 = $('.example2').select2({
width: '30%'
});
var example3 = $('.example3').select2({
width: '30%'
});
example1.select2('open');
setTimeout(function() {
example1.select2('close');
setTimeout(function() {
example1.find('option').eq(1).attr('disabled', 'disabled');
example1.trigger('change.select2');
example1.select2('open');
}, 1000);
}, 1000);
example2.select2('open');
setTimeout(function() {
example2.select2('close');
setTimeout(function() {
var newOption = example1.find('option').eq(1).clone();
newOption.attr('disabled', 'disabled');
/* example1.find('option').eq(1).attr('disabled', 'disabled'); */
example2.find('option').eq(1).replaceWith(newOption);
example2.trigger('change.select2');
example2.select2('open');
}, 1000);
}, 1000);
setTimeout(function() {
example3.select2('close');
setTimeout(function() {
example3.find('option').eq(1).attr('disabled', 'disabled');
/* example1.trigger('change.select2'); */
example3.select2('open');
}, 1000);
}, 1000);