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

я использую элемент управления select2,загрузка данных через ajax. Это требует использования <input type=hidden..> тег.

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

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

51
javascript jquery jquery-select2 knockout-2.0 ui-select2

7 ответов

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

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

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

одиночный выбор:

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

обратите внимание, что когда нет выбора, переменная 'данные' будет 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);

из 3.x docs:

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

метод данных, вызванный на одиночном выборе со значением unset, вернет null, в то время как метод данных, вызванный на пустом multi-select, вернется [].

127

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

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

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

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

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

его работа идеально подходит с 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);
 });
0

приведенный ниже код также решает иначе

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

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

 });
0

правильный способ сделать это с v4:

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

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

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

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

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

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

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