Как получить выбранный текст из select2 при использовании <input>

Question

Я использую элемент select2, loading data через ajax. Для этого требуется использование тега <input type=hidden..>.

Теперь я хочу получить выделенный текст. (The value свойства в выражении data-bind Sotres только id)

Я попытался $(".select2-chosen").text(), но это ломает, когда у меня есть несколько элементов управления ВЫБ.2 на этой странице.

Answer 1

Как и в случае с Select2 4.x, он всегда возвращает массив, даже для списков, не относящихся к нескольким.

var data = $('your-original-element').select2('data') 
alert(data[0].text); 
alert(data[0].id); 

Для Select2 3.x и ниже

Single выберите:

var data = $('your-original-element').select2('data'); 
if(data) { 
    alert(data.text); 
} 

Обратите внимание, что, когда нет выбора, переменная 'данные' будет нулевым.

Мульти выберите:

var data = $('your-original-element').select2('data') 
alert(data[0].text); 
alert(data[0].id); 
alert(data[1].text); 
alert(data[1].id); 

От 3.х docs:

данных Получает или задает выбор. Аналогичен методу val, но работает с объектами вместо идентификаторов.

Метод данных, вызываемый при однократном выборе с неустановленным значением, возвращает null, тогда как метод данных, вызываемый при пустом мультивыборке, возвращает [].

Answer 2

Я наконец понял это сделать это:

var $your-original-element = $('.your-original-element'); 
var data = $your-original-element.select2('data')[0]['text']; 
alert(data); 

, если вы хотите получить значение:

var value = $your-original-element.select2('data')[0]['id']; 
alert(value); 

Answer 3

Также вы можете иметь выбранное значение, используя следующий код:

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

Answer 4

Снова я предлагаю Простой и Простой

Его рабочая Совершенная с AJAX при поиске пользователя и выбрать его сохраняет выбранную информацию с помощью 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); 
}); 

Answer 5

ниже код также решает иначе

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

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

}); 

Answer 6

Правильный способ сделать это, как из v4 является :

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

Он документирован так может сломаться в будущем без предупреждения.

Вы, вероятно, хотите, чтобы проверить, есть ли выбор первого однако:

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

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

Answer 7

Это один работает нормально, используя V 4.0.3

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