12

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?

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 3
    possible duplicate of [How to get Selected Text from select2 when using ](http://stackoverflow.com/questions/19814601/how-to-get-selected-text-from-select2-when-using-input) – mccannf Jul 27 '15 at 09:26
  • 3
    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 Jul 28 '15 at 11:26
  • @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 Aug 04 '15 at 02:58

5 Answers5

16

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>
Community
  • 1
  • 1
mccannf
  • 16,619
  • 3
  • 51
  • 63
  • 1
    is there a way to read the current selected text without having to listen to change event? – leora Aug 25 '15 at 21:52
  • 1
    is there a solution where you can read the text without having to do it from the on event?? – leora Oct 03 '15 at 11:40
  • @leora - 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);` – mccannf Oct 04 '15 at 06:20
6

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/

Bhavin Solanki
  • 4,740
  • 3
  • 26
  • 46
5

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()) 
});
Mike
  • 189
  • 1
  • 2
  • 18
5

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());
    });
Farhan
  • 1,453
  • 2
  • 15
  • 20
  • 5
    Thanks for posting an answer to this question! Code-only answers [are discouraged](http://meta.stackexchange.com/a/148274) 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. – AHiggins Aug 05 '15 at 17:43
1
Basicall$

console.log("#select2 option:selected").text()
Racil Hilan
  • 24,690
  • 13
  • 50
  • 55
Hıdır ASLAN
  • 11
  • 1