当使用 < input > 时，如何从 select2获取 Selected Text

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);

Also you can have the selected value using following code:

alert("Selected option value is: "+$('#SelectelementId').select2("val"));

Again I suggest Simple and Easy

Its Working Perfect with ajax when user search and select it saves the selected information via ajax

 $("#vendor-brands").select2({
ajax: {
url:site_url('general/get_brand_ajax_json'),
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;


return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom    formatter work
minimumInputLength: 1,
}).on("change", function(e) {




var lastValue = $("#vendor-brands option:last-child").val();
var lastText = $("#vendor-brands option:last-child").text();


alert(lastValue+' '+lastText);
});

The code below also solves otherwise

.on("change", function(e) {


var lastValue = e.currentTarget.value;
var lastText = e.currentTarget.textContent;


});

The correct way to do this as of v4 is:

$('.select2-chosen').select2('data')[0].text

It is undocumented so could break in the future without warning.

You will probably want to check if there is a selection first however:

var s = $('.select2-chosen');


if(s.select2('data') && !!s.select2('data')[0]){
//do work
}

This one is working fine using V 4.0.3

var vv = $('.mySelect2');
var label = $(vv).children("option[value='"+$(vv).select2("val")+"']").first().html();
console.log(label);

Used this for show text

var data = $('#id-selected-input').select2('data');
data.forEach(function (item) {
alert(item.text);
})

In Select2 version 4 each option has the same properties of the objects in the list;

if you have the object

Obj = {
name: "Alberas",
description: "developer",
birthDate: "01/01/1990"
}

then you retrieve the selected data

var data = $('#id-selected-input').select2('data');
console.log(data[0].name);
console.log(data[0].description);
console.log(data[0].birthDate);
 

Select2 version 2.4

There are 2 working scenario that I required and this is what works for me.

let val,
dom = '#your_selector_id';


val = $(dom+' option:selected').text();
console.log('Initial text is '+val);


$(document).on('change', () => {
val = $(dom).select2('data').text;
console.log('Selected text is '+val);
});

Check your browser console for the debug print.