RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-09 16:49:24 +03:00
Code Issues Projects Releases Wiki Activity

Add documentation on how to programmatically access a selection data.

Browse Source
This commit is contained in:
Stan Senotrusov 2016-05-01 22:42:14 +02:00 committed by James Pic
parent 8dc02bcfb8
commit 576f93778d
3 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/nav/options.html
View File

@ -20,6 +20,9 @@
<li>
<a href="#ajax">Connecting to a remote data source</a>
</li>
<li>
<a href="#selection-api-access">Accessing a selection data</a>
</li>
</ul>
</li>
<li>

1
docs/_includes/options/data.html
View File

@ -6,4 +6,5 @@
{% include options/data/select.html %}
{% include options/data/array.html %}
{% include options/data/ajax.html %}
{% include options/data/selection-access.html %}
</section>

40
docs/_includes/options/data/selection-access.html Normal file
View File

@ -0,0 +1,40 @@
<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>&lt;SELECT&gt;</code> element to store the selection result, the selection data are represented by <code>&lt;OPTION&gt;</code> elements and can be accessed in the plain jQuery/DOM manner. The resulting elements will have properties/values from the source data objects, stored by the means of jQuery <code>data()</code> method and accessible by key <code>'data'</code>:
</p>
{% highlight js linenos %}
// Retrieve source data object's data of the first selected element
$('select').find(':selected').data('data');
{% endhighlight %}
<p>
Another technique is not to rely on jQuery's <code>data()</code> method but to extend the <code>&lt;OPTION&gt;</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 %}
</section>