2015-08-29 19:51:52 -04:00
< section >
< h2 id = "templateSelection" >
How can I customize the way selections are displayed?
< / h2 >
2015-09-13 11:32:41 -04:00
2016-01-14 19:30:11 -05:00
< 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 >
2016-02-14 13:33:33 -05:00
{% highlight js linenos %}
2016-01-14 19:30:11 -05:00
function template(data, container) {
return data.text;
}
$('select').select2({
templateSelection: template
});
2016-02-14 13:33:33 -05:00
{% endhighlight %}
2016-01-14 19:30:11 -05:00
2015-08-29 19:51:52 -04:00
< h3 >
Nothing is being displayed when I select an option
< / h3 >
2015-09-13 11:32:41 -04:00
2015-09-14 19:30:32 -04:00
{% include options/not-written.html %}
2015-09-13 11:32:41 -04:00
2015-08-29 19:51:52 -04:00
< h3 >
I am using HTML in my selection template but it isn't displaying it
< / h3 >
2015-09-13 11:32:41 -04:00
2015-09-14 19:30:32 -04:00
{% include options/not-written.html %}
2015-09-13 11:32:41 -04:00
2015-08-29 19:51:52 -04:00
< h3 >
How can I access the container where the selection is displayed?
< / h3 >
2015-09-13 11:32:41 -04:00
2015-09-14 19:30:32 -04:00
{% include options/not-written.html %}
2015-08-29 19:51:52 -04:00
< / section >