HOME

<section>
  <h2 id="templateSelection">
    How can I customize the way selections are displayed?
  </h2>

  <p>
    When a selection is made by the user Select2 will display the text of the option by default, just like how it is displayed in a standard select box.  You can override the display of the selection by setting the <code>templateSelection</code> option to a JavaScript function.
  </p>

{% highlight js linenos %}
function template(data, container) {
  return data.text;
}

$('select').select2({
  templateSelection: template
});
{% endhighlight %}

  <h3>
    Nothing is being displayed when I select an option
  </h3>

  {% include options/not-written.html %}

  <h3>
    I am using HTML in my selection template but it isn't displaying it
  </h3>

  <p>
    If you want to use HTML in your selection template, you will need to return a jQuery object. Otherwise, Select2 will assume that your template only returns text and will escape it.
  </p>

{% highlight js linenos %}
function template(data, container) {
  return $('<strong></strong>')
    .text(data.text);
}

$('select').select2({
  templateSelection: template
});
{% endhighlight %}

  <h3>
    How can I access the container where the selection is displayed?
  </h3>

  {% include options/not-written.html %}
</section>