jQuery select2 show optgroup label when selected
<p>I am using the jQuery plugin <a href="https://select2.github.io/" rel="noreferrer">Select2</a></p>

<p>If I have a multiselect with the following structure:</p>

<pre><code>&lt;select name="search-term[]" multiple="multiple"&gt;
    &lt;optgroup label="Categories"&gt;
    &lt;option value="category_4"&gt;Internal&lt;/option&gt;
    &lt;option value="category_2"&gt;Business&lt;/option&gt;
    &lt;option value="category_5"&gt;External&lt;/option&gt;
    &lt;option value="category_1"&gt;Science&lt;/option&gt;
    &lt;option value="category_6"&gt;Sports and Social&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Event Types"&gt;
    &lt;option value="eventtype_2"&gt;Meeting&lt;/option&gt;
    &lt;option value="eventtype_3"&gt;Social Activity&lt;/option&gt;
    &lt;option value="eventtype_4"&gt;Sporting Activity&lt;/option&gt;
    &lt;option value="eventtype_1"&gt;Symposium&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="Locations"&gt;
    &lt;option value="location_2"&gt;Office 1&lt;/option&gt;
    &lt;option value="location_3"&gt;Office 2&lt;/option&gt;
    &lt;option value="location_1"&gt;Office 3&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;
</code></pre>

<p>If I select "Office 1" under the optgroup labelled Locations then the label on the selected option says "Office 1"</p>

<p>Is there a way to change this so that it shows the optgroup label as well so the label on the selection option would say "Location: Office 1". </p>

<p>See the following image for the label I am referring to:</p>

<p><a href="https://i.stack.imgur.com/sQ4SH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/sQ4SH.jpg" alt="enter image description here"></a></p>