What is the correct way to read select2 version 4 dropdown selected text?

Question

I am trying to figure out the correct way to read the current selected text (not value) in select2 dropdown item. I don't see this listed on the documentation.

I can see there is a new DOM element that is the ID of the original select dropdown with the "-container" suffix and "select2-" prefix so not sure if this is the recommended to read this or select2 has another api call.

What is the correct way using jquery to read the current selected text?

Keever

possible duplicate of How to get Selected Text from select2 when using <input> – Chewink

this is not a duplicate of the above questions as this is not using input and its on a new version that was rewritten and doesn't seem to support this option – Keever

@Keever You can get the selected option list from from the select. This will return array of the options that are selected. Then you can manipulate as required text. Like coma separated or in array. $(".js-example-basic-multiple")[0].selectedOptions – Getupandgo

Answer 1

Just use the details from this answer: How to get Selected Text from select2 when using <input>

Like so:

$(function() { 
    // Initialise
    $('.example-basic-single').select2();
    $('.example-basic-multiple').select2();

    // Retrieve default selected value
    var defaultSelection = $('.example-basic-single').select2('data');
    $("#selectedS").text(defaultSelection[0].text);

    // Single select capture
    $('.example-basic-single').on("select2:select", function (e) { 
       var data = $(this).select2('data');
       $("#selectedS").text(data[0].text);
    });

    $('.example-basic-multiple').on("select2:select", function (e) { 
       var data = $(this).select2('data');
       var selectedText = $.map(data, function(selected, i) {
                              return selected.text;
                          }).join();
       $("#selectedM").text(selectedText);
    });
    $('.example-basic-multiple').on("select2:unselect", function (e) { 
       var data = $(this).select2('data');
       var selectedText = $.map(data, function(selected, i) {
                              return selected.text;
                          }).join();
       $("#selectedM").text(selectedText);
    });

});

.demo 
{ 
  margin: 10px;
}
.labelS, .labelM
{
  margin-top: 5px;
}
.selection
{ 
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<div class="row">
		<div class="col-xs-4">
			<div class="selection">Single select:</div>
			<select class="example-basic-single form-control">
				<option value="1">One</option>
				<option value="2">Two</option>  
				<option value="3">Three</option>
			</select>
			<div class="labelS">Selected:</div>
			<div id="selectedS"></div>
		</div>
		<div class="col-xs-4">  
			<div class="selection">Multiple Select:</div>
			<select class="example-basic-multiple form-control" multiple="multiple">
				<option value="1">One</option>
				<option value="2">Two</option>  
				<option value="3">Three</option>
				<option value="4">Four</option>
				<option value="5">Five</option>
			</select>
			<div class="labelM">Selected:</div>
			<div id="selectedM"></div>
		</div>
	</div>
</div>

Chewink

is there a way to read the current selected text without having to listen to change event? – Keever

is there a solution where you can read the text without having to do it from the on event?? – Keever

@Keever - you can just use the statements inside the on events for single or multiple selects. E.g. for the single just use: var data = $('.example-basic-single').select2('data'); $("#selectedS").text(data[0].text); – Chewink

Answer 2

You can get select2 selected value using jquery option:selected and get .text() .

HTML

<select id="select2">
    <option value="1">Pizza</option>
    <option value="1">Hamburger</option>
    <option value="1">Salad</option>
    <option value="1">Gyro Wrap</option>
</select>

jQuery

$('#select2').select2();
$('#select2').on('change', function(){
    alert($("#select2 option:selected").text()) 
});

You can checkout http://jsfiddle.net/tu9h5zu8/1/

Lozar

Answer 3

I don't think select2 has a change callback function but you can attach it to the select elemet.

http://jsfiddle.net/tu9h5zu8/

$('select').select2();
$('select').on('change', function(){
    alert($(this).find('option:selected').text()) 
});

Knowitall

Answer 4

Through current selected option value you can get option text like this in jquery.

$('select').on('change', function(){
        alert($("option[value='"+$(this).val()+"']"),$(this)).text());
    });

Hypozeuxis

Thanks for posting an answer to this question! Code-only answers are discouraged on Stack Overflow, because a code dump with no context doesn't explain how or why the solution will work, making it impossible for the original poster (or any future readers) to understand the logic behind it. Please, edit your question and include an explanation of your code so that others can benefit from your answer. – Bicolor

Answer 5

Basicall$

console.log("#select2 option:selected").text()

Gleesome