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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

Simple answer is :

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

and you can write by this way also:

 $('#first').val()

Answer 7

Try this :

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

Answer 8

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.

Answer 9

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

Answer 10

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

Answer 11

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/

Answer 12

Solution :

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