How to get Selected Text from select2 when using <input>
As of Select2 4.x, it always returns an array, even for non-multi select lists.
var data = $('your-original-element').select2('data')alert(data[0].text);alert(data[0].id);
For Select2 3.x and lower
Single select:
var data = $('your-original-element').select2('data');if(data) { alert(data.text);}
Note that when there is no selection, the variable 'data' will be null.
Multi select:
var data = $('your-original-element').select2('data')alert(data[0].text);alert(data[0].id);alert(data[1].text);alert(data[1].id);
From the 3.x docs:
data Gets or sets the selection. Analogous to val method, but works with objects instead of ids.
data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return [].
I finally figured it out doing this:
var $your-original-element = $('.your-original-element');var data = $your-original-element.select2('data')[0]['text'];alert(data);
if you also want the value:
var value = $your-original-element.select2('data')[0]['id'];alert(value);
Used this for show text
var data = $('#id-selected-input').select2('data'); data.forEach(function (item) { alert(item.text); })