49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
<section>
|
|
<h2 id="selection-api-access">
|
|
How to programmatically access a selection data?
|
|
</h2>
|
|
|
|
<p>
|
|
There are few ways to programmatically access the selection data. Calling <code>select2('data')</code> will return the JavaScript array of an objects representing the current selection. Each object will have properties/values which was in the source data objects passed through <code>processResults</code> and <code>templateResult</code> functions (as in <a href="#data">Loading data from an array</a> and <a href="#ajax">Connecting to a remote data source</a>).
|
|
</p>
|
|
|
|
{% highlight js linenos %}
|
|
$('select').select2('data');
|
|
{% endhighlight %}
|
|
|
|
<p>
|
|
As Select2 uses the HTML <code><SELECT></code> element to store the selection result, the selection data are represented by <code><OPTION></code> elements and can be accessed in the plain jQuery/DOM manner:
|
|
</p>
|
|
|
|
{% highlight js linenos %}
|
|
$('select').find(':selected');
|
|
{% endhighlight %}
|
|
|
|
<p>
|
|
It is possible to extend the <code><OPTION></code> elements representing selection with the HTML data-* attributes containing arbitrary data from the source data objects:
|
|
</p>
|
|
|
|
{% highlight js linenos %}
|
|
$('select').select2({
|
|
// ...
|
|
templateSelection: function (data, container) {
|
|
$(data.element).attr('data-custom-attribute', data.customValue);
|
|
return data.text;
|
|
}
|
|
});
|
|
|
|
// Retrieve custom attribute value of the first selected element
|
|
$('select').find(':selected').attr('data-custom-attribute')
|
|
{% endhighlight %}
|
|
|
|
<p>
|
|
In addition, properties/values from source data objects can ba accessed from within an event handler:
|
|
</p>
|
|
|
|
{% highlight js linenos %}
|
|
$('select').on('select2:select', function (event) {
|
|
console.log(event.params.data)
|
|
});
|
|
{% endhighlight %}
|
|
|
|
</section> |