Як отримати виділений текст із select2 при використанні <input>


80

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

Тепер я хочу отримати вибраний текст. ( valueВластивість у data-bindвиразі є idєдиною)

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

Відповіді:


189

Починаючи з 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);
}

Зверніть увагу, що коли немає виділення, змінна 'data' буде нульовою.

Мультивибір:

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 :

data Отримує або встановлює виділення. Аналогічний методу val, але працює з об’єктами замість ідентифікаторів.

метод даних, що викликається для одного вибору зі значенням, що не має значення, повертає нуль, тоді як метод даних, що викликається для порожнього мультивибору, повертає [].


13
Зверніть увагу, що якщо $('your-original-element')встановлено параметр множинного вибору $('your-original-element').select2('data'), масив повертатиметься, у цьому випадку data.textзамість цього працювати не будеdata[index].text
tangobee

7
Поточна версія (v4.0.0 на сьогодні) select2, навіть для одиночного вибору, var data = $('your-original-element').select2('data')[0]працювала лише у мене. $('your-original-element').select2('data').id // or .textдав мені undefined. Див. Цей jsfiddle для підтвердження. Спробуйте увійти $('your-original-element').select2('data').id // or .textв консоль у скрипті.
Пт0zenFyr

Як відправити за допомогою форми submit .. normal way?
Hos Mercury

Ця відповідь не є доброю. не працює з 4.x + з select2. Вам потрібно перейти до першого елементу масиву, як сказав @ Fr0zenFyr.
Ніколас Беллі,

Ця $('your-original-element').select2('data');робота для мене. Дякую
ankit suthar

15

Нарешті я зрозумів це, роблячи це:

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

5

Використовував це для тексту шоу

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

2

Також ви можете отримати вибране значення за допомогою наступного коду:

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

2

Наведений нижче код також вирішує інакше

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

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

 });

2

Правильний спосіб зробити це з v4:

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

Він не оформлений документально, тому може зламатися в майбутньому без попередження.

Напевно, вам захочеться перевірити, чи є вибір спочатку:

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

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

0

Знову я пропоную Простий і Легкий

Його ідеальна робота з 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

Цей працює нормально, використовуючи V 4.0.3

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

0

У Select2 версії 4 кожна опція має однакові властивості об’єктів у списку;

якщо у вас є об’єкт

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

потім Ви отримуєте вибрані дані

var data = $('#id-selected-input').select2('data');
console.log(data[0].name);
console.log(data[0].description);
console.log(data[0].birthDate);
 
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.