如何实现使用插件为多选jquery下拉多选插件列表控件动态赋值

来源：蜘蛛抓取(WebSpider) 时间：2017-05-31 07:31 标签： 多选下拉框插件
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。1603人阅读
上一篇讲了select2的多选和大标题设置。
这周做到了修改的功能，需要将旧数据的选项默认显示。这里也顺便说一下。
方法很简单，加上一句话即可
$(“#id”).val(data).trigger(‘change’);
data是一个存放id值的数组，如 [1,2,3,4 ]，或者[1,2,3,4,] 这样也可以。
$(document).ready(function() {
url: '${ctx}/back/members/membersOption',
dataType: 'json',
success: function(data) {
$("#_speakers").select2({
language: 'zh-CN',
data: data,
placeholder:'请选择',
multiple: true
if ('${notice.speakers}'){
$("#_speakers").val([${notice.speakers}]).trigger('change');
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4935次
排名：千里之外网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
有一个多选的需求，在网上找到了这个插件：multiselect /ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍，不少童鞋都问了这么个问题，怎么获取选中的值？真是个好问题，因为我在看demo的时候也发现了这个问题，呵呵！ 先简单说说这个插件： jquery-multiselect 基于Jquery-ui的组件体系。 所以使用它的时候，先得导入jquery-ui相关的js和css哦 特性 •支持点击label实现checkbox组选择. •头部选项，如全选/ 取消全选 /关闭功能. •支持键盘选择. •支持5种不同的事件回调函数. •以列表方式显示选中项目，并且可以设置最大显示值. •方便改变位置，渐变速度，滚动容器的高度，链接文字，文本框默认内容等. 效果如图：
上图效果的代码： html代码： . 代码如下: &select id ="sela" title="Basic example" multiple="multiple" name="example-basic" size="5"& &option value="V1"&Option 1&/option& &option value="V2"&Option 2&/option& &option value="V3"&Option 3&/option& &option value="option4"&Option 4&/option& &option value="option5"&Option 5&/option& &option value="option6"&Option 6&/option& &option value="option7"&Option 7&/option& &option value="option8"&Option 8&/option& &option value="option9"&Option 9&/option& &option value="option10"&Option 10&/option& &option value="option11"&Option 11&/option& &option value="option12"&Option 12&/option& &/select&
调用multiselect插件的代码： . 代码如下: $(function(){ $("select").multiselect({ noneSelectedText: "==请选择==", checkAllText: "全选", uncheckAllText: '全不选', selectedList:4 }); });
调用multiselect时有不少参数，我想官方文档写的很详啦，懂E文的同学都可以看看哦。 好，下面是我们最关心的问题，怎么获取选中的值？官方文档没有找到哪个方法可以获得select控件中选中的项的值。我读了它的源代码，是 1.14pre版本。真的没找到。不过我们可以自己DIY一下这个插件哦！很简单地说！ 首先声明一个变量用来记录选中的值列表，截个图：
然后我们会发现源码里有一个update方法，这个方法是用来获取用户选中项的文本，呵呵，于是乎我们想到了，简单DIY一下：
然后在代码中添加一个方法： . 代码如下: MyValues:function(){ return multiV }
ok，对插件的DIY完成了。下面是页面上调用喽： . 代码如下: function showValues() { var valuestr = $("#sela").multiselect("MyValues"); alert(valuestr); }
Yeah，OK啦！ Diy的代码和Demo见。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]

我要回帖

更多关于 多选下拉框插件 的文章

 

随机推荐