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?

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>