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

12
votes

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?

5
jqueryjquery-select2dropdownboxjquery-select2-4
possible duplicate of How to get Selected Text from select2 when using <input> – mccannf
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 – leora
@leora 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 – Rohit Harkhani

5 Answers

16
votes

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>
6
votes

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/

5
votes

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

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());
    });
1
votes
Basicall$

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