Каков правильный способ выбора выделенного текста select2 version 4?

Question

Я пытаюсь найти правильный способ прочитать текущий выделенный текст (не значение) в элементе выпадающего списка select2. Я не вижу этого перечисленного on the documentation.

Я вижу, что есть новый элемент DOM, который является идентификатором исходного выпадающего списка с суффиксом «-контейнер» и префиксом «select2-», поэтому не уверен, что это рекомендуется прочитать или select2 имеет другой апи.

Каков правильный способ использования jquery для чтения текущего выделенного текста?

Answer 1

Просто используйте детали из этого ответа: How to get Selected Text from select2 when using <input>

Как так:

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

Answer 2

Я не думаю, что Выбор2 имеет функцию изменения обратного вызова, но вы можете прикрепить его к избранному элементу.

http://jsfiddle.net/tu9h5zu8/

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

Answer 3

Через текущего выбранного значения параметра вы можете получить вариант текста, как это в JQuery.

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

Answer 4

Вы можете получить select2 выбрано значение с помощью JQuery option:selected и получить .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()) 
}); 

Вы можете оформить http://jsfiddle.net/tu9h5zu8/1/

Answer 5

Basicall$ 

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