Cách chính xác để đọc văn bản đã chọn thả xuống lựa chọn phiên bản 4 là gì?

Question

Tôi đang cố gắng tìm ra cách chính xác để đọc văn bản đã chọn hiện tại (không phải giá trị) trong mục thả xuống select2. Tôi không thấy điều này được liệt kê on the documentation.

Tôi có thể thấy có phần tử DOM mới là ID của menu thả xuống chọn gốc có hậu tố "-container" và tiền tố "select2-", vì vậy không chắc liệu đây có phải là gợi ý để đọc hoặc select2 này hay không gọi api.

Cách chính xác khi sử dụng jquery để đọc văn bản đã chọn hiện tại là gì?

Answer 1

Chỉ cần sử dụng các chi tiết từ câu trả lời này: How to get Selected Text from select2 when using <input>

Giống như vậy:

$(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

Tôi không nghĩ Select2 có chức năng thay đổi callback nhưng bạn có thể đính kèm nó để chọn elemet.

http://jsfiddle.net/tu9h5zu8/

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

Answer 3

Qua giá trị tùy chọn lựa chọn hiện tại bạn có thể nhận được tùy chọn văn bản như thế này trong jquery.

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

Answer 4

Bạn có thể nhận select2 chọn giá trị sử dụng jquery option:selected và nhận .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()) 
}); 

Bạn có thể kiểm http://jsfiddle.net/tu9h5zu8/1/

Answer 5

Basicall$ 

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