title: How to keep source select's attributes (like CSS classes) in Select2?
body: <p>I would like to have Select2 include all the CSS classes of the original source in its selection and results drop-down rendering.</p>
  
  <p><a href="https://stackoverflow.com/a/33966565">This solution</a> uses the <code>templateResult</code> option and works for the results drop-down. It <em>seems</em> to work when I use the same code for <code>templateSelection</code> as suggested in the <a href="https://stackoverflow.com/a/40300702">next answer</a>, but there is a problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function copyClassesToSelect2(data, container) {
      if (data.element) {
          $(container).addClass($(data.element).attr("class"));
      }
      return data.text;
  }
  
  (function ($) {
      "use strict";
      $(function () {
          $("#my-select").select2({
              allowClear: true,
              minimumResultsForSearch: Infinity,
              templateResult: copyClassesToSelect2,
              templateSelection: copyClassesToSelect2
          });
      });
  }(jQuery));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.one {background: cyan}
  .two {background: yellow}
  .three {background: lightgreen}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"&gt;&lt;/script&gt;
  
  &lt;select id="my-select" class="my-select" name="my-select" data-placeholder="--- Please select ---"&gt;
      &lt;option value=""&gt;--- Please select ---&lt;/option&gt;
      &lt;option value="one" class="one"&gt;One&lt;/option&gt;
      &lt;option value="two" class="two"&gt;Two&lt;/option&gt;
      &lt;option value="three" class="three"&gt;Three&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When changing the selection, the rendered selected item keeps all the previously attached classes. Therefore, when selecting "one" or "two" <strong>after</strong> "three", they both stay green instead of their respective color. Also, when clearing the selection, the placeholder has the green background.</p>
  
  <ol>
  <li><p>How would I need to modify the <code>templateSelection</code> callback to make the selected item only have the desired class?</p></li>
  <li><p>Would the hardly documented  options <code>adaptContainerCssClass</code> and <code>adaptDropdownCssClass</code> be of any help here? What do they do?</p></li>
  <li><p>Is there a better approach to make Select2 inherit all the original source attributes, for example <code>class="my-select"</code> from the original <code>&lt;select&gt;</code>?</p></li>
  </ol>