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

Question

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

现在，我想检索所选文本。(data-bind表达式中的value属性仅存储id)

我尝试了$(".select2-chosen").text()，但当页面上有多个select2控件时，它会出错。

- robasta

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 文档:

data获取或设置选定内容。类似于val方法，但使用对象而不是id。

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

- Moeri

---

请注意，如果$（'your-original-element')是多选的，则$（'your-original-element'）.select2（'data'）将返回数组。在这种情况下，data.text将无法使用，而应该使用data[index].text。 - tangobee

在当前版本（截至今天为止的v4.0.0）的select2中，即使是单选，只有var data = $('your-original-element').select2('data')[0]对我有效。 $('your-original-element').select2('data').id // 或 .text返回undefined。请参见此jsfiddle以获得证明。在fiddle的控制台中尝试记录$('your-original-element').select2('data').id // 或 .text。 - Fr0zenFyr

如何通过表单提交正常发送？ - mercury

这个答案不好。它不能与select2的4.x+版本一起使用。你需要像@Fr0zenFyr说的那样去数组的第一个项目。 - Nicolas Belley

这个 $('your-original-element').select2('data'); 对我有用。谢谢。 - always-a-learner

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

- Sol

Answer 3

用于显示文本的代码

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

- Rahman Rezaee

Answer 4

截止到v4版本中，正确的做法如下:

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

这是一个未记录的方法，可能会在未来发生变化而没有警告。

然而，您可能需要先检查是否有选择:

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

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

- rynop

Answer 5

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

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

- Lokesh Das

Answer 6

以下代码还可以解决其他问题。

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

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

 });

- César Augusto

Answer 7

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

- Alberi De Paula

Answer 8

我的下拉列表：Select2

<select id="GradeId" onchange="GetGPAByGradeId()" style="width: 100%;">
    <option value="5" selected>GPA 5</option>
    <option value="4" selected>GPA 4</option>
</select>

获取选定文本：

var _GradeId = $("#GradeId option:selected").text();
console.log(_GradeId);

- R M Shahidul Islam Shahed

Answer 9

Select2版本2.4

我需要两种工作场景，以下是适用于我的方法。

let val, 
dom = '#your_selector_id';

val = $(dom+' option:selected').text();
console.log('Initial text is '+val); 

$(document).on('change', () => {
  val = $(dom).select2('data').text;    
  console.log('Selected text is '+val);
});

请检查您的浏览器控制台以获取调试输出。

- Deviance

Answer 10

这个使用 V 4.0.3 版本是正常工作的。

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

- Qullbrune