jQuery select2 获取 select 标签的值？

jQuery select2 get value of select tag?

提问by Renish Khunt

Hello friends this is my code:

你好朋友这是我的代码：

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

This is my select2 code:

这是我的 select2 代码：

$("#first").select2();

Below is code for getting selected value.

下面是获取选定值的代码。

$("#first").select2('val'); // It returns first,second,three.

This is return a text like first,second,threeand I want to get 1,2,3.
Means I need the value of select box, not text.

这是返回一个类似的文本first,second,three，我想得到1,2,3.
意味着我需要选择框的值，而不是文本。

回答by somesh

$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

回答by Krish R

To get Select element you can use $('#first').val();

要获取 Select 元素，您可以使用 $('#first').val();

To get the text of selected value - $('#first :selected').text();

要获取所选值的文本 - $('#first :selected').text();

Can you please post your select2()function code

你能把你的select2()功能代码贴出来吗

回答by wawa

$("#first").select2('data')will return all data as map

$("#first").select2('data')将所有数据作为地图返回

回答by Steven Johnston

This solution allows you to forget select element. Helpful when you do not have an id on select elements.

此解决方案允许您忘记选择元素。当您在选择元素上没有 id 时很有帮助。

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

回答by Johny Pie

If you are using ajax, you may want to get updated valueof select right after the selection.

如果您使用 ajax，您可能希望在选择后立即获取select 的更新值。

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

Credits: Steven-Johnston

学分：史蒂文-约翰斯顿

回答by Rajiv Sharma

Simple answer is :

简单的答案是：

$('#first').select2().val()

and you can write by this way also:

你也可以这样写：

 $('#first').val()

回答by Fahmi Imanudin

Try this :

尝试这个 ：

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

回答by Basti M

See this fiddle.
Basically, you want to get the values of your option-tags, but you always try to get the value of your select-node with $("#first").val().

看到这个小提琴。
基本上，您想获取-tags的values option，但您总是尝试select使用$("#first").val().

So we have to select the option-tags and we will utilize jQuerys selectors:

所以我们必须选择选项标签，我们将使用 jQuery 选择器：

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")selects every optionwhich is a child of the element with the id first.

$("#first option")选择每个option是具有 id 的元素的子元素first。

回答by Michal Vrchota

Above solutions did not work for me with latest select2 (4.0.13)

以上解决方案对我最新的 select2 (4.0.13) 不起作用

With jQuery you can use this solution to retrieve value according to documentation: https://select2.org/programmatic-control/retrieving-selections

使用 jQuery，您可以使用此解决方案根据文档检索值：https: //select2.org/programmatic-control/retrieving-selections

$('#first').find(':selected').val();

回答by Bartosz Was

Other answers wasn't working for me so i developed solution:

其他答案对我不起作用，所以我开发了解决方案：

I created option with class="option-item"for easy targeting

我创建了带有 class= "option-item" 的选项，以便于定位

HTML :

HTML :

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

Then for every selected option i added display noneproperty

然后对于每个选定的选项，我添加了display none属性

CSS:

CSS：

option:checked {
   display: none;
}

Now we can add changeto our SelectBox to find our selected option with display none property by simple :hiddenattribute

现在我们可以添加更改到我们的 SelectBox 以通过简单的:hidden属性找到我们选择的选项，并且显示 none属性

JQuery:

查询：

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

Working fiddle: https://jsfiddle.net/Friiz/2dk4003j/10/

工作小提琴：https: //jsfiddle.net/Friiz/2dk4003j/10/