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