阅读 select2 version 4 dropdown selected text 的正确方法是什么？

Question

我正在尝试找出读取 select2 下拉项中当前 selected 文本（不是值）的正确方法。我没有看到此列表 on the documentation。

我可以看到有一个新的 DOM 元素，它是原始 select 下拉列表的 ID，带有“-container”后缀和 "select2-" 前缀，所以不确定这是否推荐阅读此书或 select2 有另一个 api 电话。

使用 jquery 阅读当前 selected 文本的正确方法是什么？

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">
 <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>

Answer 2

我认为 select2 没有更改回调函数，但您可以将其附加到 select 元素。

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

您可以使用 jquery option:selected 选择 select2 value 并获得 .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()

阅读 select2 version 4 dropdown selected text 的正确方法是什么？

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

jquery

dropdownbox

jquery-select2

jquery-select2-4