How to get Selected Text from select2 when using <input>

Question

I am using the select2 control, loading data via ajax. This requires the use of the <input type=hidden..> tag.

Now, I want to retrieve the selected text. (The value property in the data-bind expression sotres the id only)

I have tried $(".select2-chosen").text(), but this breaks when I have multiple select2 controls on the page.

Answer 1

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 [].