Question

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

现在，我想要检索所选文本。（value表达式中的data-bind属性仅限于id

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

Answer 1

从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'将为null。

多选：

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，而在空的multi-select上调用的数据方法将返回   []。

Answer 2

我终于明白这样做了：

"44[5e405f7b46d912b50ea59d0f0962ed9e251042a4b31208315c406a4aa962]ff" was not equal to "44[e504f5b7649d215be05ad9f09026dee95201244a3b218013c504a6a49a26]ff"

如果您还想要值：

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

Answer 3

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

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

Answer 4

下面的代码也解决了

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

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

 });

Answer 5

我再次提出简单易行

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

Answer 8

用于显示文字

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

Answer 9

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

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

9 个答案: