使用 <input> 时如何从 select2 中获取选定文本答案

【问题标题】：How to get Selected Text from select2 when using <input>使用 <input> 时如何从 select2 中获取选定文本
【发布时间】：2013-11-17 20:07:53
【问题描述】：

我正在使用 select2 控件，loading data 通过 ajax。这需要使用<input type=hidden..> 标签。

现在，我想检索选定的文本。（data-bind 表达式中的value 属性仅适用于id）

我尝试过$(".select2-chosen").text()，但是当我在页面上有多个 select2 控件时，这会中断。

【问题讨论】：

标签： c javascript jquery knockout-2.0 jquery-select2

【解决方案1】：

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

【讨论】：

【解决方案2】：

用于显示文本

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

【讨论】：

【解决方案3】：

这个使用 V 4.0.3 可以正常工作

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

【讨论】：

【解决方案4】：

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

请注意，当没有选择时，变量“数据”将为空。

多选：

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 方法，但有效使用对象而不是 id。

在未设置值的单选上调用的数据方法将返回 null，而在空多选上调用的数据方法将返回 []。

【讨论】：

请注意，如果$('your-original-element') 设置为多选，$('your-original-element').select2('data') 将在这种情况下返回数组data.text 将不起作用，而是使用data[index].text
使用 select2 的当前版本（截至今天的 v4.0.0），即使是单选，也只有 var data = $('your-original-element').select2('data')[0] 对我有用。 $('your-original-element').select2('data').id // or .text 给了我undefined。请参阅this jsfiddle 以获取证据。尝试在小提琴的控制台中记录$('your-original-element').select2('data').id // or .text。
如何通过表单提交..正常方式发送？
这个答案不好。不适用于 select2 的 4.x +。您需要像@Fr0zenFyr 所说的那样转到数组中的第一项。
这个$('your-original-element').select2('data'); 为我工作。谢谢

【解决方案5】：

从 v4 开始执行此操作的正确方法是：

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

它没有记录，因此将来可能会在没有警告的情况下中断。

您可能需要先检查是否有选择：

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

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

【讨论】：

【解决方案6】：

下面的代码也可以解决

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

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

 });

【讨论】：

【解决方案7】：

我再次建议简单易行

当用户搜索并选择它时，它与 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);
 });

【讨论】：

【解决方案8】：

您还可以使用以下代码获得选定的值：

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

【讨论】：

【解决方案9】：

我终于想通了：

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

【讨论】：