在Select2 v4中获取选定的值

Question

这个问题特别针对 Select2 v4

如何获取 Select2 下拉列表中选中的 值？

我尝试了以下方法：

jQuery('#Dropdown').val()

jQuery('#Dropdown').select2().val()

似乎两者都没有给我所选元素的值。运行此代码时，我确信已经选择了一个项目。

- Zapnologica

---

所选元素的ID是什么意思？Select有选项，每个选项都有值和标题。你是指值吗？ - Shrike

@Shrike 我相信我做了。 - Zapnologica

Answer 1

select2没有提供任何直接方法来获取选定选项的属性值。您需要在select2中获取选定的选项元素，然后找到其属性ID：

jQuery('#Dropdown').select2().find(":selected").attr("id");

这可以进一步缩小为：

jQuery("#Dropdown :selected").attr("id");

- Milind Anantwar

---

jQuery('#Dropdown').select2() - 我认为这不正确，它会初始化一个新的实例。 - Shrike

Answer 2

试试这个：

$('#Dropdown').select2('data')[0].text;

- plectranthus

Answer 3

<select id="Dropdown">
    <option id="1">Value 1</option>
    <option id="2">Value 2</option>
</select>

$('#Dropdown').select2('data')[0].id; //to get the id
$('#Dropdown').select2('data')[0].text; //to get the value

请注意select2('data')后面的[0]吗？

在Select2 v2中不需要，只需使用$('#Dropdown').select2('data').text;

Select2 v4返回一个名为results的对象数组，因此需要添加[0]。

- Adrian P.

Answer 4

Select2提供了一个onselect事件，您可以传递事件参数，从中可以获取所选选项。

$('.selectSports').on('select2:select', function(event) {
    event.params.data // returns you the selected item.
});

你可以使用以下代码：if event.params.data.id == "your_target_id"，然后执行相应操作。

- remonses

Answer 5

如果你有这样的选择：

<select class="select2-hidden-accessible" data-placeholder="Select a value" tabindex="-1" aria-hidden="true">
  <option></option>
  <option value="1">Option 1</option>
</select>

并且选择了“选项1”项目。

var $select = $(".select2").parent().find("select"); // it's <select> element
var value = $select.val(); 

然后$select.val()将为您返回值"1"。

- Shrike

---

我在寻找“input”，而不是“select”……哎呀。谢谢！ - Eliezer Berlin

Answer 6

如果你只关心值而不关心ID，为什么不将ID值设置为与你的值相同-因为每个值都是唯一的。

然后你可以简单地这样做-

jQuery('#Dropdown').val()

这会返回id，但由于我们的id与值相同，我们获取该值并将其用于进一步处理。

请注意我的select是一个输入 -

<input class="text" type="text" name="select"  id="select">
$("#select").select2({
    data : dataSet
});

而 dataSet 是类似于元素的数组

[
{id: "value1", text: "value1"},
{id: "value2", text: "value1", selected: "selected"}
]

- Aniket Thakur