jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 读取select2版本4下拉列表选择文本的正确方法是什么?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找出在SELEct2下拉项目中读取当前所选文本(不是值)的正确方法.我看不到这个列出 on the documentation.

我可以看到有一个新的DOM元素是具有“-container”后缀和“SELEct2-”前缀的原始选择下拉列表的ID,所以不知道这是推荐读取还是SELEct2有另一个api调用.

使用jquery读取当前所选文本的正确方法是什么?

解决方法

只需使用这个答案的细节:
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",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>

大佬总结

以上是大佬教程为你收集整理的jquery – 读取select2版本4下拉列表选择文本的正确方法是什么?全部内容,希望文章能够帮你解决jquery – 读取select2版本4下拉列表选择文本的正确方法是什么?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。