我正在尝试找出在 select2 下拉项中读取当前选定文本（不是值）的正确方法。我没有看到此列表 on the documentation。
我可以看到有一个新的 DOM 元素，它是带有“-container”后缀和“select2-”前缀的原始选择下拉列表的 ID，因此不确定这是推荐阅读此内容还是 select2 有另一个 api打电话。
使用jquery读取当前选中文本的正确方法是什么？
【问题讨论】：
标签： jquery jquery-select2 dropdownbox jquery-select2-4
只需使用此答案中的详细信息： 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>【讨论】：
on 事件中的语句进行单选或多选。例如。对于单只使用：var data = $('.example-basic-single').select2('data'); $("#selectedS").text(data[0].text);
您可以使用 jquery option:selected 获取 select2 selected 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())
});
【讨论】：
我认为 select2 没有更改回调函数，但您可以将其附加到 select 元素。
$('select').select2();
$('select').on('change', function(){
alert($(this).find('option:selected').text())
});
【讨论】：
通过当前选择的选项值，您可以在 jquery 中获得类似这样的选项文本。
$('select').on('change', function(){
alert($("option[value='"+$(this).val()+"']"),$(this)).text());
});
【讨论】：
Basicall$
console.log("#select2 option:selected").text()
【讨论】：