title: Select2: Preselected item and correct rendering through templateSelection
body: <p>When using <a href="https://select2.github.io/" rel="nofollow noreferrer">Select2 v4</a>, the suggested (actually the right) way <strong>to set a selected value programmatically</strong>, is to manipulate the underlying select element, add the desired <code>&lt;option&gt;</code> elements you want, set the value with <code>$selectElement.val(&lt;value&gt;)</code> and trigger a <code>.trigger('change')</code> event so that select2 plugin will update itself from the underlying select element. You can see this <a href="https://github.com/select2/select2/issues/3057" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The problem with this is when you have defined a <code>templateSelection</code>, that returns not just text for the selected value, but a whole HTML DOM (for instance, you may apply styling, add images, icons etc etc and return that as the rendered selection).</p>
  
  <p><code>templateSelection</code> accepts input as it comes from either an array datasource, or an ajax datasource etc. Each item represents one option but it may have more than just and <code>id</code> and a <code>text</code>. <code>templateSelection</code> may take into account many of the item's properties to produce the rendered output.</p>
  
  <p>You can only define value and text in an <code>&lt;option&gt;</code> element. You cannot define the actual object (item) you want to set as selected, so that the <code>templateSelection</code> may produce the right output.</p>
  
  <p><strong>Is there a way to achieve that using only select2's API?</strong></p>
  
  <p>If not, is there any other workaround to have the value selected from code rendered correctly through <code>templateSelection</code>?</p>