jQuery select2获取select标签的值？

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,three and I want to get 1,2,3.
Means I need the value of select box, not text.

这是返回第一，第二，第三的文本，我想获得1,2,3。意味着我需要选择框的值，而不是文本。

9 个解决方案

#1

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

#2

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（）函数代码吗？

#3

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

$（“＃first”）。select2（'data'）将所有数据作为map返回

#4

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

#5

If you are using ajax, you may want to get updated value of 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

致谢：Steven-Johnston

#6

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().

看到这个小提琴。基本上，您希望获取option-tags的值，但是您总是尝试使用$（“＃first”）。val（）获取select-node的值。

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

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

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

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

$（“＃first option”）选择每个选项，该选项是id为first的元素的子元素。

#7

Try this :

尝试这个：

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

#8

Simple answer is :

简单的答案是：

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

and you can write by this way also:

你也可以这样写：

 $('#first').val()

#9

-1

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 none property

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

CSS:

CSS：

option:checked {
   display: none;
}

Now we can add change to our SelectBox to find our selected option with display none property by simple :hidden attribute

现在我们可以添加更改到我们的SelectBox，通过simple：hidden属性找到我们选择的display none属性选项

JQuery:

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/

#1

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

#2