select2 add class to selected option

Question

I want to add class to option in select2, so after i click on suggest list item it will add custom class added-to-select-multiple to the main select structure.

Here's example code:

<select id="myselect2" multiple="multiple" style="width:50%;">
    <option>One</option>
    <option>Another option</option>
    <option>Hello there</option>
</select>

After i click on first element of suggest list :

_________HTML output from inspect___________________

<select id="myselect2" multiple="" style="width:50%;" data-select2-id="myselect2" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
// result 
  <option data-select2-id="4" class="added-to-select-multiple">One</option>
  <option data-select2-id="5">Another option</option>
  <option data-select2-id="6">Hello there</option>
</select>

How to achive that? I was experimenting with :

$('#myselect2').trigger({
        type: 'select2:select',

});

but i haven't found the solution, i think i wasn't even close.

Fiddle: https://jsfiddle.net/Friiz/19rootn5/1/

Thanks for any help!

Martin D. Martin D. · Accepted Answer · 2018-04-06T15:21:00

This may be a way to do it:

$('#myselect2').select2();
    
$('#myselect2').on('change', function(){
    $(this).find('option').removeClass('added-to-multiple-select');
    $(this).find('option:selected').addClass('added-to-multiple-select');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select id="myselect2" multiple="multiple" style="width:50%;">
  <option>One</option>
  <option>Another option</option>
  <option>Hello there</option>
</select>

select2 add class to selected option

1 Answers