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.

Hambletonian

Can you provide a JSFiddle? It would be very useful. – Muriah

question is not clear. exactly what do u want? – Dumdum

Answer 1

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

Undesigning

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Hambletonian

$("#first").val(); will return 1,2,3 (which ever is selected) and can you post the code in function select2() for more details. – Undesigning

for an select called by id name instead of class name, use: $(".first").val() – Cowan

@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() – Factional

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

Stubble

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Hambletonian

Am not sure, I did understand your question. – Stubble

when i used select2 plugin then i get value using $("#first").val(). it's not return anything it return blank. – Hambletonian

Can you provide fiddle exmaple with your plugin? – Stubble

I had to use $('#first :selected').text(); the other option was returning all possible options. – Comprehension

$input.find(':selected').text() returns empty string – Hughett

Answer 3

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

Chromoplast

Very useful if you have extra properties on the select2 objects – Impalpable

select2.org/programmatic-control/add-select-clear-items – Enrichment

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

Rossiya

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. – Fracas

Thank you so much my lord :p Happy Coding – Periphery

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

Magdamagdaia

Answer 6

Simple answer is :

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

and you can write by this way also:

 $('#first').val()

Hoahoactzin

Answer 7

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

Bless

It returns only first value of all selected value – Karalee

use $('#first').find(':selected').text(); for the text – Codee

Answer 8

Try this :

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

Regret

@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 :) – Heinie

Yeah, I am sorry. Thanks, @Heinie and Thank you so much Fahmi Imanudin for posting an answer :) – Hambletonian

Answer 9

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

Sapiential

While your answer may solve the question, including an explanation 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 – Apery

Answer 10

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.

Stood

$("#first").val(); //it return 1,2,3 OR $("#first").select2('val'); // it return first,second,three – Hambletonian

Seems like i got your question wrong, then please clarify exactly what you want to achieve. – Stood

when i used select2 plugin then i get value using $("#first").val(). it's not return anything it return blank. – Hambletonian

See this fiddle. Works perfectly well for me. (I added select2.js under the external resources, though i cannot tell why the boxes look ugly). – Stood

the key was that you said that we want to get value of option tags! – Balmung

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/

Valueless

Answer 12

Solution :

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

Count