jQuery select2 get value of select tag?

Question

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:

$("#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.

Can you provide a JSFiddle? It would be very useful. – Ionică Bizău Nov 11 '13 at 14:07 — Ionică Bizău, Nov 11 '13 at 14:07
question is not clear. exactly what do u want? – codingrose Nov 11 '13 at 14:16 — codingrose, Nov 11 '13 at 14:16

score 180 · Accepted Answer · answered Nov 11 '13 at 14:17

180

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

answered Nov 11 '13 at 14:17

somesh

3,508
4
16
10

5

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Renish Khunt Nov 11 '13 at 14:23
$("#first").val(); will return 1,2,3 (which ever is selected) and can you post the code in function select2() for more details. – somesh Nov 11 '13 at 14:40
for an select called by id name instead of class name, use: $(".first").val() – Rui Martins Jun 21 '17 at 09:15
@RuiMartins wrong. ID's are called with "#" and classes are called with ".", so to call by ID, you'd use $("#first").val() and for CLASS you'd use $(".first").val() – Source Matters May 13 '20 at 13:48

score 67 · Answer 2 · answered Nov 11 '13 at 14:07

67

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

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

Can you please post your select2() function code

answered Nov 11 '13 at 14:07

Krish R

22,583
7
50
59

1

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Renish Khunt Nov 11 '13 at 14:22
Am not sure, I did understand your question. – Krish R Nov 11 '13 at 14:27
1

when i used select2 plugin then i get value using $("#first").val(). it's not return anything it return blank. – Renish Khunt Nov 11 '13 at 14:32
Can you provide fiddle exmaple with your plugin? – Krish R Nov 11 '13 at 14:35
1

I had to use `$('#first :selected').text();` the other option was returning all possible options. – Jeff Bluemel Apr 17 '18 at 17:43
$input.find(':selected').text() returns empty string – Vasilii Suricov Jul 19 '19 at 14:46

score 42 · Answer 3 · answered Jan 11 '16 at 07:53

42

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

answered Jan 11 '16 at 07:53

wawa

616
5
14

1

Very useful if you have extra properties on the select2 objects – jamesSampica Oct 13 '16 at 15:40
https://select2.org/programmatic-control/add-select-clear-items – Kamlesh Sep 25 '20 at 14:04

score 16 · Answer 4 · edited Jul 18 '17 at 10:39

16

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

//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

edited Jul 18 '17 at 10:39

ufukomer

1,021
1
14
16

answered Sep 05 '16 at 20:20

Johny Pie

843
3
14
37

Hi, may i know where is `currentTarget` comes from? none of your ID/name example is related to the Question. So I cannot relate anywhere. – mastersuse Mar 28 '20 at 13:17
Thank you so much my lord :p Happy Coding – Vipertecpro Nov 22 '20 at 21:03

score 9 · Answer 5 · answered Sep 02 '16 at 16:07

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

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

Rajiv Sharma · Answer 6 · 2017-11-23T09:25:38.083

8

Simple answer is :

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

and you can write by this way also:

 $('#first').val()

edited Nov 23 '17 at 09:25

answered Nov 23 '17 at 09:18

Rajiv Sharma

6,746
1
52
54

score 4 · Answer 7 · answered Sep 04 '17 at 08:52

4

Try this :

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

answered Sep 04 '17 at 08:52

Fahmi Imanudin

41
1

@RenishKhunt the answers here are not only for you (person asking the question), but also for other people seeing this page. And the more different solutions are submitted here, the better choice has everyone else, again: not just you :) – infografnet Dec 19 '18 at 19:33
1

Yeah, I am sorry. Thanks, @infografnet and Thank you so much Fahmi Imanudin for posting an answer :) – Renish Khunt Dec 24 '18 at 16:20

score 4 · Answer 8 · answered Feb 25 '20 at 14:35

4

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

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

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

answered Feb 25 '20 at 14:35

Michal Vrchota

326
2
6

score 3 · Answer 9 · answered Feb 12 '21 at 16:56

3

$(".element").select2(/*Your code*/)
.on('change', function (e) {
     var getID = $(this).select2('data');
     alert(getID[0]['id']); // That's the selected ID :)
});

answered Feb 12 '21 at 16:56

GSIxz

53
7

While your answer may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. You can edit your answer to add explanations and give an indication of what limitations and assumptions apply. - [From Review](https://stackoverflow.com/review/late-answers/28310557) – Adam Marshall Feb 12 '21 at 18:37

score 2 · Answer 10 · answered Nov 11 '13 at 14:16

2

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

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

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

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

answered Nov 11 '13 at 14:16

KeyNone

8,745
4
34
51

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Renish Khunt Nov 11 '13 at 14:23
Seems like i got your question wrong, then please clarify exactly what you want to achieve. – KeyNone Nov 11 '13 at 14:28
when i used select2 plugin then i get value using $("#first").val(). it's not return anything it return blank. – Renish Khunt Nov 11 '13 at 14:31
See [this fiddle](http://jsfiddle.net/j3Jaf/1/). Works perfectly well for me. (I added select2.js under the external resources, though i cannot tell why the boxes look ugly). – KeyNone Nov 11 '13 at 14:36
the key was that you said that we want to get value of option tags! – Dariux Aug 10 '15 at 07:31

score 0 · Answer 11 · answered Apr 04 '18 at 17:44

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

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

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

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

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/

score 0 · Answer 12 · edited Oct 17 '18 at 23:57

0

Solution :

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();

edited Oct 17 '18 at 23:57

www

38,575
12
48
84

answered Oct 17 '18 at 23:38

Hafzullah YILDIRIM

1

jQuery select2 get value of select tag?

12 Answers12

Linked