How can I customize the way selections are displayed?

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 templateSelection option to a JavaScript function.

{% highlight js linenos %} function template(data, container) { return data.text; } $('select').select2({ templateSelection: template }); {% endhighlight %}

Nothing is being displayed when I select an option

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

I am using HTML in my selection template but it isn't displaying it

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.

{% highlight js linenos %} function template(data, container) { return $('') .text(data.text); } $('select').select2({ templateSelection: template }); {% endhighlight %}

How can I access the container where the selection is displayed?

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