51 lines
1.3 KiB
HTML
51 lines
1.3 KiB
HTML
<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>
|